标签: event-propagation

如果我有一个嵌套在另一个元素中的元素(html)并且它们都附加了一个单击处理程序,则单击内部元素执行其单击处理程序,然后冒泡到父级并执行其单击处理程序.这就是我理解它的方式.

如果没有附加的事件是相同的,事件会冒出DOM树吗？如果是这样的话,是否值得在每个处理程序的末尾放置一个event.stopPropagation()来阻止它并加快速度？

拳头,对问题的长度道歉.

我试图将自定义Qt事件从子窗口小部件传播到顶部父窗口小部件,以便根据事件类型而不是链接信号触发某些操作.

Qt的文档表明,每一个事件与公布postEvent()有accept()和ignore()方法可以传播(这意味着每个QEvent子类).

我试图覆盖customEvents方法而不是events无济于事.

蟒蛇

我在Python中使用PyQt4尝试了这个(Qt版本是4.6).

from PyQt4.QtGui import *
from PyQt4.QtCore import *

class Foo(QWidget):
    def doEvent(self):
        QApplication.postEvent(self, QEvent(12345))

    def event(self, event):
        event.ignore()
        return False

class Bar(QWidget):
    def __init__(self, *args, **kwargs):
        super(Bar, self).__init__(*args, **kwargs)
        self.foo = Foo(self)
        layout = QHBoxLayout()
        layout.addWidget(self.foo)
        self.setLayout(layout)

    def event(self, event):
        if event.type() == 12345:
            self.someEventHandler()
        return True

    def someEventHandler(self):
        print 'Handler in {0}'.format(self.__class__.__name__)

if __name__=='__main__':
    app = QApplication([''])
    bar = Bar()
    bar.show() …

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

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

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

是什么区别 event.bubbles,以false对任何事件,并设置event.stopPropagation()或stopImmediatePropagation()同时处理事件？

我正在使用Flex4和AS3.

我想将可编辑div中的字符数限制为10.在用户达到限制后,我想使用.preventDefault()方法来保护div免受其他字符的影响.你能救我吗？JSFiddle https://jsfiddle.net/7x2dfgx6/1/ HTML

<div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>

JQuery的

    jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $('#About').text().length;
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
        if(char>limit)
        {
            event.preventDefault();
            //TODO
        }
    });
});

我正在 Flutter 中制作一个 Android 应用程序，我想添加一个交互式小部件来侦听原始指针事件并对它们做出反应。使用小部件很容易做到这一点Listener：

class _MyWidget extends State<MyWidget> {\n  @override\n  build(BuildContext ctx) {\n    return Listener(\n      onPointerMove: (event) {\n        event.delta // use this to do some magic...\n      },\n      child: ...\n    );\n  }\n}\n

然而，这个小部件是在 a 内呈现的PageView，它允许用户滑动以更改页面。这是我不想摆脱 \xe2\x80\x93 的行为，除了用户滑过的时间MyWidget。由于MyWidget需要用户触摸并拖动，我不希望他们意外导航到不同的页面。

在浏览器中，这实现起来非常简单，我只需调用event.stopPropagation()，事件就不会从其MyWidget祖先传播（即冒泡） PageView。如何停止 Flutter 中事件的传播？

理论上，我可以MyWidget设置应用程序状态，并PageView在我滑动时使用它来禁用MyWidget。然而，这将违背 Flutter 小部件的自然数据流：它需要我在多个位置添加回调，并使所有小部件更加交织在一起且可重用性降低。我更愿意防止事件在本地冒泡。

编辑：我尝试过使用AbsorbPointer，但它似乎在错误的方向上“阻止传播”。它阻止 的所有 …

考虑以下典型的React文档结构:

Component.jsx

<OuterClickableArea>
    <InnerClickableArea>
        content
    </InnerClickableArea>
</OuterClickableArea>

这些组件的组成如下:

OuterClickableArea.js

export default class OuterClickableArea extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            clicking: false
        }

        this.onMouseDown = this.onMouseDown.bind(this)
        this.onMouseUp = this.onMouseUp.bind(this)
    }

    onMouseDown() {
        if (!this.state.clicking) {
            this.setState({ clicking: true })
        }
    }

    onMouseUp() {
        if (this.state.clicking) {
            this.setState({ clicking: false })
            this.props.onClick && this.props.onClick.apply(this, arguments)
            console.log('outer area click')
        }
    }

    render() {
        return (
            <div
                onMouseDown={this.onMouseDown}
                onMouseUp={this.onMouseUp}
            >
                { this.props.children }
            </div>
        )
    }
}

有了这个参数,InnerClickableArea.js除了类名和控制台日志语句之外几乎有相同的代码.

现在,如果您要运行此应用程序并且用户单击内部可单击区域,则会发生以下情况(如预期的那样):

1. 外部区域注册鼠标事件处理程序
2. 内部区域注册鼠标事件处理程序 …

可能重复:
如何获取位于点击点的所有元素的列表？

我知道我可以通过使用获得具有最高z-index的元素document.elementFromPoint(x,y).

问题是我需要获取包含触摸事件位置的每个div.

如何将触摸传播到下面的元素？

我看到一些hacky解决方案在重新生成事件时显示/隐藏元素,或者使用css指针事件样式,但是我不能使用它们,它们可能会导致闪烁......

下图说明了我需要做的事情:

如果紫色,绿色和蓝色框表示div元素,红点是触摸位置,我需要一个返回"div3,div2,div1"的函数.

我有指令做这样的事情:

app.directive('custom', function(){
    return {
        restrict:'A',
        link: function(scope, element){
            element.bind('click', function(){
                alert('want to prevent this');
            });

        }
    }
});

是的,有必要为这种情况做jQuery-way绑定.

现在,如果满足某些条件,我想停止此事件(单击)传播.

试图做:

  $event.stopPropagation();
  $event.preventDefault();

但它没有帮助.

这里小提琴 - 例如http://jsfiddle.net/STEVER/5bfkbh7u/

我有两个矩形，每个都有一个TapHandler. 矩形 A 是矩形 B 的父级
如何配置 A 和 B，以便单击 B 时，EventPoint不会传播到onSingleTappedA 的处理程序？

EventPoint文档建议将其属性设置accepted为 true：

将 Accepted 设置为 true 可防止事件传播到 PointerHandler 的 Item 下面的 Item。

然而，同时文档声明这accepted是一个只读属性，这没有多大意义（我猜文档已经过时或根本就是错误的）。

测试代码：

Rectangle {
    id: a

    width: 200
    height: 200
    color: "yellow"
    TapHandler {
        onSingleTapped: console.log("A tapped")
    }

    Rectangle {
        id: b
        color: "blue"
        width: 100
        height: 100
        TapHandler {
            onSingleTapped: function(eventPoint) {
                // Stop propagation.
                eventPoint.accepted = true
                console.log("B tapped")
            }
        } …