标签: event-propagation

当我想在某个事件被触发后阻止其他事件处理程序执行时,我可以使用两种技术之一.我将在示例中使用jQuery,但这也适用于plain-JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

这两种停止事件传播的方法之间有什么显着差异吗？

对我来说,return false;比执行方法更简单,更短并且可能更不容易出错.使用该方法,您必须记住正确的套管,括号等.

另外,我必须在回调中定义第一个参数才能调用该方法.也许,有一些原因可以解释为什么我应该避免这样做并使用preventDefault呢？有什么更好的方法？

我目前正在使用jQuery使div可点击,在这个div中我也有锚点.我遇到的问题是,当我点击一个锚点时,两个点击事件都会被触发(对于div和锚点).如何在单击锚点时阻止div的onclick事件触发？

这是破碎的代码:

JavaScript的

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

在Angular 2中阻止鼠标事件传播的最简单方法是什么？我应该传递特殊$event物体并给stopPropagation()自己打电话还是有别的办法.例如在Meteor中我可以简单地false从事件处理程序返回.

我有一个小"浮动工具箱" - 一个div与position:fixed; overflow:auto.工作得很好.

但是当在该框内滚动(使用鼠标滚轮)并到达底部或顶部时,父元素"接管""滚动请求":工具框后面的文档滚动.
- 哪个很烦人而不是用户"要求".

我正在使用jQuery并认为我可以使用event.stoppropagation()来阻止此行为:
$("#toolBox").scroll( function(event){ event.stoppropagation() });

它确实进入了函数,但仍然无论如何传播(文档滚动)
- 在SO(和Google)上搜索这个主题非常困难,所以我不得不问:
如何防止滚动事件的传播/冒泡？

编辑:
工作解决方案感谢amustill(以及Brandon Aaron的mousewheel-plugin:https:
//github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js

$(".ToolPage").bind('mousewheel', function(e, d)  
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    }
    else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});

这是一个基本组件.无论是<ul>和<li>拥有的onClick功能.我只想点击on on <li>,而不是<ul>.我怎样才能做到这一点？

我打得四处e.preventDefault(),e.​​stopPropagation(),但没有成功.

class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      <ul 
        onClick={(e) => {
          console.log('parent');
          this.handleClick();
        }}
      >
        <li 
          onClick={(e) => {
            console.log('child');
            // prevent default? prevent propagation?
            this.handleClick();
          }}
        >
        </li>       
      </ul>
    )
  }
}

// => parent
// => child

当用户点击某个链接时,我想用确认对话框显示它们.如果他们点击"是",我想继续原始导航.一个问题:我的确认对话框是通过返回一个jQuery.Deferred对象实现的,该对象仅在用户单击Yes按钮时解析.所以基本上确认对话框是异步的.

所以基本上我想要这样的东西:

$('a.my-link').click(function(e) {
  e.preventDefault(); e.stopPropogation();
  MyApp.confirm("Are you sure you want to navigate away?")
    .done(function() {
      //continue propogation of e
    })
})

当然,我可以设置一个标志并重新触发点击,但这很麻烦.这样做的任何自然方式？

I have a bootstrap dropdown menu below. It has a link in it hooked up to a knockout.js binding, that returns false because I dont want the # tag to be send to the browser url. However doing this doesnt close the dropdown menu when I click the link. Anyway around this?

HTML

<div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: !noResults()"><i class="icon-download-alt" ></i> Export <span class="icon-caret-down"></span></button>

    <ul class="dropdown-menu">
        @foreach(var exportUrl in Model.ExportUrls)
        {
            <li>
                <a href="#" data-bind="disable: noResults(), download: { …

这个问题经常被问到,但从来没有真正回答过.让我们看看我们是否可以补救它!

事件传播

Google允许您使用事件处理程序通过其API绑定到Google Map View中的事件.

有时您可以将事件处理程序绑定到Google 本身已绑定的事件.因此,当您的事件触发并执行您告诉它的任何操作时,您可能会发现Google同时也在做自己的小事.

嗯,我可以处理事件,以便我的代码运行,但是阻止事件继续并解雇Google的事件处理程序？

你确定可以!欢迎来到Event Propagation(又名事件冒泡).

看看这段代码

在这里,我绑定一个事件处理程序来双击Google Map:

var aListener = google.maps.event.addListener(map, 'dblclick', function(event) {
    // Try to prevent event propagation to the map
    event.stop();
    event.cancelBubble = true;
    if (event.stopPropagation) {
        event.stopPropagation();
    }
    if (event.preventDefault) {
        event.preventDefault(); 
    } else {
        event.returnValue = false;  
    }
});

这map是一个要绑定的Google Map对象.

这不起作用.事件冒泡,地图放大.我不知道为什么.

你问,你读过文件吗？

确实.该文件说,使用event.stop();

我看过别人说的话.这个问题正是我的问题.它被标记为已修复,但解决方案不起作用.

想法？

解决方法

doubleclick事件的一种可能的解决方法是在您需要它时不要触发Google的默认行为,然后再重新启用它.

你用这个disableDoubleClickZoom参数做到这一点.请参阅 …

我正在查看http://www.quirksmode.org/js/events_order.html,这部分内容不明确:

在Microsoft模型中,您必须将事件的cancelBubble属性设置为true.

window.event.cancelBubble = true

Run Code Online (Sandbox Code Playgroud)

在W3C模型中,您必须调用事件的stopPropagation()方法.

e.stopPropagation()

Run Code Online (Sandbox Code Playgroud)

这会阻止事件在冒泡阶段的所有传播.

所以我的问题是:

• 当事件侦听器设置为在捕获阶段侦听时,它是否会自动不继续传播到内部元素？
• 或者,如果它继续传播,是否会e.stopPropagation()停止传播,或者这只适用于泡沫阶段？

随着object.stopPropagation()我能阻止事件冒泡,但我怎样才能重新启用它？

在js中有预先定义的函数object.startPropagation吗？

编辑:

问题是JS记得你是否点击"对象"而不是停止事件冒泡,即使我不想要它,所以我想阻止它:

document.getElementById("object").onclick = function(e){
    if(e && e.stopPropagation) {
        e.stopPropagation();
    } else {
          e = window.event;
          e.cancelBubble = true;
    }
}