标签: event-bubbling

事件冒泡和捕获之间有什么区别？在这两个中,哪个是更快更好的模型？

我有一个小"浮动工具箱" - 一个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();
        }
    }
});

我试图理解使用jQuery .on()方法的直接和委托事件处理程序之间的这种特殊区别.具体而言,本段最后一句:

当selector被提供时,事件处理程序被称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.

"运行任何元素的处理程序"是什么意思？我做了一个测试页面来试验这个概念.但是以下两个结构导致了相同的行为:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

要么,

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

也许有人可以参考一个不同的例子来澄清这一点？谢谢.

jquery切换默认调用preventDefault(),因此默认值不起作用.你不能点击一个复选框,你不能点击链接等

是否可以恢复默认处理程序？

我想知道这是否是在页面上的任何位置单击时隐藏可见元素的正确方法.

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

当元素边界内发生click事件时,元素(div,span等)不应消失.

在我的WPF应用程序我有一个ListView其ScrollViewer.VerticalScrollBarVisibility设置为Disabled.它包含在一个ScrollViewer.当我尝试使用鼠标滚轮时ListView,外部ScrollViewer不会滚动,因为它ListView正在捕获滚动事件.

如何强制ListView允许滚动事件冒泡到ScrollViewer？

我有一个有趣的情况 - 我有一个表行,当前,当我点击"展开"按钮时,它显示它是隐藏的对应物.包含展开按钮的原始(未隐藏)行也包含某个单元格中的某些内容,单击该单元格后,该内容将变为可编辑状态.我想摆脱展开按钮,并通过双击行本身的任何位置来启用行的扩展,包括单击它时变为可编辑的字段.你可以在这里闻到麻烦.

当我双击一行时,在dblclick发生之前首先触发两个单击事件.这意味着如果我双击该字段,它将变为可编辑的字段,并且该行将展开.我想阻止这个.我希望双击以防止单击的触发,并且单击以执行常规操作.

使用event.stopPropagation()显然不会起作用,因为它们是两个不同的事件.

有任何想法吗？

编辑(一些半伪代码):

原始版本:

<table>
    <tbody>
        <tr>
            <td><a href="javascript:$('#row_to_expand').toggle();" title="Expand the hidden row">Expand Row</a></td>
            <td>Some kind of random data</td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]->value("First editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]->value("Second editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]->value("Third editable value") ?></td>
            <!-- ... -->
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]->value("Nth editable value") ?></td>
        </tr>
        <tr style="display: none" id="row_to_expand">
            <td colspan="n">Some hidden data</td>
        </tr>
    </tbody>
</table>

期望的版本:

<table>
    <tbody>
        <tr ondblclick="$('#row_to_expand').toggle()">
            <td>Some kind of random data</td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]->value("First editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]->value("Second editable value") ?></td>
            <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]->value("Third …

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

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

我有一个带有链接的div:

<div id="myDiv">
    <a href="http://www.lol.com">Lol</a>
</div>

点击<div />应该去某个地方,但点击孩子<a />应该去www.lol.com.我从以前的问题和jQuery网站上看到.stopPropagation可以防止冒泡,但我如何防止泡沫向下(这不是必要的吗？).

如何在jQuery中停止自定义事件冒泡？

例如,我有这个代码:

$('.myclass').bind('amodaldestroy', function(){
    ....does something.....
})

我怎么只允许在冒泡时找到的第一个元素上触发一次？我可以添加退货false吗？

$('.myclass').bind('amodaldestroy', function(){
     ....does something.....
    return false;
})