标签: event-capturing

我正在寻找一个处理React.js中冒泡和捕获的例子.我找到了一个JavaScript,但我找不到React.js的等价物.

我如何在React.js中创建冒泡和捕获的示例？

我有一个有趣的问题关于事件捕获,冒泡和jQuery.on().

我最近了解了更多关于事件捕获和事件冒泡之间的区别以及两者如何在DOM中的子父元素之间进行不同的流动.

因此,要添加具有"事件捕获方向"的事件侦听器,我将使用:

element.addEventListener("click", myFunction, true);

并添加一个事件监听器与"事件泡沫方向"我会使用:

element.addEventListener("click", myFunction, false);

这一切都很好,但我想知道的是当使用jquery.on()添加事件监听器时,如何在捕获和冒泡方面指定事件方向？

目前我使用的是:

$('parent selector').on('click', 'child selector', function(){alert('just alert something already...');});

如何告诉jQuery它需要在"事件捕获方向"或"事件冒泡方向"中添加这些事件监听器？

的addEventListenerDOM方法支持的第三可选，布尔参数（将useCapture），以指示该功能是否应使用事件冒泡或事件捕捉作为传播方法。在本文中，差异很好地展示了（单击示例并查看代码）。

从 SO 和博客文章的其他问题中，我得出结论，事件冒泡是首选，主要是因为 IE8- 不支持它。

假设我只需要支持 IE9+，在什么情况下事件捕获比事件冒泡更必要或更受欢迎？换句话说，在什么情况下让事件先在最外层元素上执行，然后在最内层元素上执行会更好？我正在寻找一个简单的、真实的例子来演示事件捕获的使用......

我最近发现了使用javascript在Bubbling和捕获DOM事件之间的区别.现在我明白它应该如何工作,但我发现了一个奇怪的情况,我想知道为什么会发生这种情况.

根据Quirks模式,事件传播开始于捕获外部div,到达底部然后冒泡到顶部.问题是我开始做一些测试.

在第一个,一切都按预期工作:

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
</script>

如果单击文本,警报将"捕获","捕获","冒泡"和"冒泡".问题是使用以下代码:

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
</script>

在这种情况下,警报会"捕获","冒泡","捕获"和"冒出".如果你注意到,唯一的区别是在第二个上首先分配冒泡,但我不认为这应该有任何区别.

我用Firefox和Chrome试过这个,结果是一样的(据我所知,Internet Explorer没有处理捕获).

有人可以在jQuery/javascript中提供事件冒泡和事件捕获的实际日常示例吗？我看到各种示例都展示了这些概念,但它们似乎总是在常规Web应用程序中实际上不需要的东西.

非常感谢描述和代码片段.

考虑一下我在WPF应用程序中有一个WebBrowser控件的场景.Web页面在WebBrowser Control中加载.该网页包含一个按钮.该网页是ASP.NET应用程序.

我想将网页的按钮点击事件捕获到WPF表单(主持WebBrowser控件).有没有办法实现这个功能？

谢谢,

塔潘

我们正在尝试重复与此插件相同的操作:https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md(此插件如何工作)但使用react-native + mapbox gl(原生).

这个想法很简单:webview和mapview是"兄弟姐妹",webview在mapview之上,webview的一部分是透明的,mapview在它下面显示.我们希望在此透明区域中发生的任何触摸事件都不会被webview和bubble /捕获到mapview,因此您可以触摸/拖动/缩放地图.

简单地说:我们希望webview的部分(不是全部)不捕获事件,而是允许底层视图捕获它们.

看起来反应原生中有一些方法允许这样做(有条件地控制事件捕获)(https://facebook.github.io/react-native/docs/view.html#onstartshouldsetrespondercapture)但我们找不到任何工作示例来测试它,我们无法完全理解提供的文档(如果为父视图或子视图指定此回调,我们甚至无法理解).

所以基本上我们只需要一些反应原生的仪器来有条件地捕获触摸事件.

任何人都可以帮助我们吗？map/webview的示例可能过于复杂,在两个视图中对事件的任何条件捕获都应该有很大帮助.

为什么这不起作用？标签位于.item父级内.我不想把它放在块元素之外,因为它不会有效.

所以我试图模拟标签点击:

$(".item").click(function(){
    $(this).find("label").click();
});

编辑:它应该触发标签并检查收音机.

<script type="text/javascript">
    $(document).ready(function () {
        $(".item").click(function() {
            $(this).find("label").click();
        });
    }); 
</script>


<div class="item">
    <h4>Item</h4>
    <ul>                
        <li>Description</li>
    </ul>
     <div class="radio-container">
        <div class="radio-stack">
            <input type="radio" class="styled" id="item1">
        </div>
        <label for="item1">$100</label>
    </div>
</div>

我试图让我的拖放工作在JavaScript中正常工作,而不必显式扫描父元素或其他ID,类循环和其他hacky魔术.

现在,当我拖动元素池中的一个元素并将其拖动到灰色区域时,该元素将被复制到放置区域(到目前为止一切正确).我基本上复制拖动元素的HTML,清除放置区域(目标)并向其添加新元素.

当您在放置区中已经有一些子元素并将其拖到子元素上时,问题就开始了.然后drop事件中的目标是子元素,而不是附加事件的div.这会导致拖动的元素清除并将其自身复制到子项而不是drop容器中.

预期的结果应该是,无论是将它放在子节点上还是直接放在主放置容器上,目标应始终是父节点,因为我正在使用事件捕获模式.

这是我在JS Fiddle中的示例代码.我正在使用带捕获的事件监听器,但它似乎正在进行冒泡阶段而忽略了捕获阶段.为什么？

这样做的正确方法是什么？

function onDrag(ev) {
  var el = ev.target;
  //console.log("Drag: " + ev.target.outerHTML)
  ev.dataTransfer.setData('text/html', ev.target.outerHTML);
}

function onContainerOver(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move"
}

function onContainerDrop(ev) {
  ev.preventDefault();
  //console.log("Drop: " + ev.dataTransfer.getData("text/html"))
  ev.target.innerHTML = ev.dataTransfer.getData("text/html");
}

document.getElementById('target').addEventListener('drop', onContainerDrop, true); // This should not bubble, but it does. Target is always the child first rather than the element where the event listener resides. Why???

#list {}

.el {
  padding: 5px;
  margin: 10px;
  border: solid 1px black; …