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>

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

Khushi

Answer 1

你需要阻止事件冒泡。在onclick代码的末尾添加以下内容： window.events.cancelBubble = true;，看看它对您有何帮助。我不确定这会阻止mouseover和mouseout事件，但会给它一个旋转。

Answer 2

嘿，我在逻辑的帮助下管理了这个事件...... 我的条件不同......

onmouseover event =写入显示第一张图像的功能

onmouseout event =写入功能，显示单击

后要显示的图像

onclick事件=保存最后点击的图像（隐藏字段中的某个地方）调用函数“写入功能以显示要显示的图像点击后。 snd function“，＆amp; say return false;

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

我认为这会对你有帮助

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

2 个答案: