0

我有两个图像，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>

要求是，我需要在鼠标悬停时使用 img1，在鼠标悬停时需要 img2，这工作正常，但在单击时，我需要打开 div，img2 被冻结，然后再次单击 div 消失，onmouseover 和 onmouseout 状态正常工作。目前的问题是，点击时会出现 div，但也会触发 onmouse over 和 onmouseout 函数。

库什

4

2 回答 2

0

您需要阻止事件冒泡。在你的onclick代码末尾，添加这个： window.events.cancelBubble = true;看看它是如何为你工作的。我不确定这是否会停止mouseover和mouseout事件，但试一试。

于 2009-11-16T21:44:29.843 回答
0

嘿，我在逻辑的帮助下管理了那个事件......我的情况完全不同......

onmouseover 事件 = 编写函数以显示第一张图片

onmouseout 事件 = 编写函数以显示单击后要显示的图像

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

仅此而已不要将事件中的 img urlmouseout作为参数写入，而是为它编写 Js fun 以在“保存最后点击的图像（即 onclick 事件中使用的第一个乐趣”）中获取 img url

我想这会对你有所帮助

于 2012-04-11T07:18:38.827 回答