在 Firefox 和 IE 上使用 event.stopPropagation()答案

【问题标题】：Work with event.stopPropagation() on firefox and IE在 Firefox 和 IE 上使用 event.stopPropagation()
【发布时间】：2013-04-19 19:19:02
【问题描述】：

为什么这段代码不适用于 Firefox 和 IE？在 chrome 上没问题。

$(document).click(function(e) {
    if ($(".contentIconDesk").hasClass('markIconDesk')) {           
        $(".contentIconDesk").removeClass('markIconDesk');          
        wndSelected = "";   
    }       
});

function markMe(icon, wnd) {
    event.stopPropagation();            
    if ($('#'+icon).hasClass('markIconDesk')) {
        $(".contentIconDesk").removeClass('markIconDesk');
        wndSelected = "";               
    } else {
        $(".contentIconDesk").removeClass('markIconDesk');
        $('#'+icon).addClass('markIconDesk');
        wndSelected = wnd;                  
    }       
};

函数 MarkMe(); 在我的 HTML 中某个 div 的事件 onClick() 中被调用。问题在于event.stopPropagation()。当我点击添加类时，浏览器会点击$(document)。

如果有一个好的建议而不是使用上面的代码，那就太好了。

【问题讨论】：

发布您正在使用的 div 的 HTML..
您可以通过event.target获取点击事件的发起者，参见api.jquery.com/event.target，例如您的文档点击绑定中的if ($(e.target).is("div")) return;。
你为什么使用 jQuery 和onclick event-handlers？
谢谢@Walid。你的建议很有用。
@DavidThomas 我没有找到一种方法来获取这样的参数：onclick="markMe($(this).attr('id'), 'stores');" 使用 jQuery 函数：$("#icon_1").click()。抱歉，我是 js 和 jQuery 的新手。但我几乎没有研究它。

标签： jquery internet-explorer firefox stoppropagation

【解决方案1】：

你可以试试这个。对于 HTML 中的 div，修改如下：

<div id="something1" onclick="markMe('icon1', 'wnd1', event)">
<div id="something2" onclick="markMe('icon2', 'wnd2', event)">
<div id="something3" onclick="markMe('icon3', 'wnd3', event)">

在你的 js 中像这样使用它：

function markMe(icon, wnd, e) {

    if (!e) var e = window.event;
    e.stopPropagation();

    $(".contentIconDesk").removeClass('markIconDesk');
    if ($('#' + icon).hasClass('markIconDesk')) {
        wndSelected = "";
    } else {
        $('#' + icon).addClass('markIconDesk');
        wndSelected = wnd;
    }
};

【讨论】：

【解决方案2】：

IE 的 DOM 不支持 stopPropagation 方法。您可以改用 event.cancelBubble = true （我的意思是，事件对象的 cancelBubble 属性）。看看this

【讨论】：

【解决方案3】：

因为event在这段代码中是未定义的：

event.stopPropagation();

【讨论】：

@DavidThomas - 它不起作用。在那个函数中它甚至没有意义。它属于点击处理程序，如果在任何地方。 :)

【解决方案4】：

您需要将事件作为MarkMe 函数的参数传递

function markMe(icon, wnd, event) {
   event.stopPropagation(); 
   //...
}

那么当你调用它时，它应该是这样的：

$('#myDiv').click(function(e) {
    //...
    MarkMe(icon, wnd, e);
});

【讨论】：

是的，但是使用 $('#myDiv').click(function(e)，我怎么知道用户点击了哪个图标？