考虑以下几点:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

我怎么能使它,当用户点击跨度,它不火div的点击事件?


当前回答

记住那个窗口。事件在FireFox中不受支持,因此它必须是沿着以下路线的东西:

e.cancelBubble = true

或者,你可以使用FireFox的W3C标准:

e.stopPropagation();

如果你想变得更花哨,你可以这样做:

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}

其他回答

使用这个函数,它将测试是否存在正确的方法。

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

从函数内部获取事件对象有两种方法:

第一个参数,在w3c兼容的浏览器中(Chrome、Firefox、Safari、IE9+) 窗外。Internet Explorer中的事件对象(<=8)

如果你需要支持不符合W3C推荐标准的旧浏览器,一般在函数中你会使用如下代码:

function(e) {
  var event = e || window.event;
  [...];
}

这将检查第一个,然后是另一个,并存储在事件变量中找到的任何一个。然而,在内联事件处理程序中,没有e对象可以使用。在这种情况下,你必须利用arguments集合,它总是可用的,并引用传递给函数的完整参数集:

onclick="var event = arguments[0] || window.event; [...]"

但是,一般来说,如果需要处理像停止传播这样复杂的事情,就应该避免使用内联事件处理程序。从中期和长期来看,单独编写事件处理程序并将它们附加到元素上是一个更好的想法,这对可读性和可维护性都有好处。

Event.preventDefault()

是目前的标准,也是对我有效的一种方法。参见:https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

    <button value=login onclick="login(event)">login</button>

//and in a script tag
function login(ev){
    ev.preventDefault()
    
    return false;
}

这在最新的Chrome、Opera和IE中都有效。(Mozilla页面显示Firefox也会这样做,所以我甚至没有测试它!)

最好的解决方案是通过javascript函数处理事件,但为了使用一个简单而快速的解决方案,直接使用html元素,一旦“事件”和“窗口。(https://developer.mozilla.org/en-US/docs/Web/API/Window/event),我建议使用以下“硬代码”:

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>

使用event.stopPropagation()。

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

对于IE: window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>