onmouseover，onmouseout，onclick事件时的图像更改

Question

我有两个图像，分别是img1和img2。 我的代码：

 function roll(id,img_name,event_name,img_id) { var state ; if(event_name == 'mouseover') { state = false;rollover();} else if(event_name == 'mouseout') {state = false;rollout();} else if(event_name == 'onClick') {alert(event_name);state = true;showdata(id,img_name,state);} else {showDIV(id);} function rollover() { if(state == false) { var imgpath='image_file/'; document[img_name].src =imgpath + img_name + '_over.png'; } } function rollout() { if(state == false) { var imgpath='image_file/'; document[img_name].src = imgpath + img_name + '.png'; } } function showDIV(id) { var div = document.getElementById(id); if ( div.style.display != "none" ) { div.style.display = "none"; document[img_name].src='downarrow.png'; } else { div.style.display = "block"; document[img_name].src='uparrow.png'; } } function showdata(id,img_name,state,img_id) {alert(state); if(state == true) { var imgpath='image_file/'+ img_name; var div = document.getElementById(id); if ( div.style.display != "none" ) { alert('none' +state); document.getElementsByName(img_name).src =imgpath + '.png'; div.style.display = "none"; } else { alert('block :' +state); document.images[img_name].src='image_file/journey_icon_over.png'; div.style.display = "block"; } } } } 

  <tr> <td valign="top" width="100%"> <img id="img1" name="journey_icon" src="image_file/journey_icon.png" alt="Journey Report" onmouseover="roll('JourneyReport','journey_icon','mouseover')" onmouseout="roll('JourneyReport','journey_icon','mouseout')" onclick="roll('JourneyReport','journey_icon','onClick',this.id)" /> <div id="JourneyReport" style="display:none;" class="divbackground"> <uc1:ReportControl ID="JourneyControl" runat="server" /> </div> </td> </tr> 

要求是，我需要在mouseover上放置img1并在mouseout上放置img2，这工作正常，但是在Click上，我需要打开div并img2冻结，然后再次单击div消失，onmouseover和onmouseout状态工作。 当前的问题是，单击时会出现div，但也会触发onmouse over和onmouseout函数。

久志

Answer 1

嘿，我已经借助逻辑处理了该事件...我的情况有所不同。

onmouseover事件=写入功能以显示第一个图像

onmouseout event =写入功能以显示您要在单击后显示的图像

onclick事件=保存上次单击的图像（在隐藏字段中的某个位置），还调用函数“写函数以显示要在click.ie。snd函数之后显示的图像”，并说返回false；

多数民众赞成在mouseout事件中不要获取img url作为参数，而是在“保存上次单击的图像（即onclick事件中使用的第一个乐趣”）中为其编写Js fun以获取img url。

我想这对你有帮助

Answer 2

您需要阻止事件冒泡。 在onclick代码的末尾，添加以下内容： window.events.cancelBubble = true; 并查看它如何为您工作。 我不确定这将停止mouseover和mouseout事件，但会旋转一下。