标签: event-bubbling

随着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;
    }
}

我知道冒泡和隧道是如何工作的.但是,我对使用它们很困惑.原因如下:

我想处理鼠标点击事件.泡沫它,有,MouseDown并且,隧道,有PreviewMouseDown.但是,MouseDown并不一定意味着用户点击了控件.可能是用户按下按钮并离开它以取消点击.如果没有点击按钮,我不想改变任何东西.

所以我的问题是,Bubbling/Tunneling策略有用吗？

我有一个有趣的问题关于事件捕获,冒泡和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它需要在"事件捕获方向"或"事件冒泡方向"中添加这些事件监听器？

我有一个事件冒泡的情况.示例:

<td (click)="doSomething()">
  <text [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

标签通过innerHtml从另一个组件呈现.问题:当我点击链接时,也会触发元素的click事件.如何解决问题(停止传播doSomething()),知道事件处理程序(或任何角度2代码)不能通过innerHtml传递？

谢谢!

我试着让文章的链接在整个文章空间中都可以点击.

首先,我做了悬停的事情,在鼠标悬停时改变颜色等等......然后点击它应该触发链接,但这会产生"过多的递归".

我认为这是一个event bubbling问题.我试图与工作event.cancelBubble = true;或stopPropagation()没有运气.更糟糕的运气!

任何人？

    $("div.boxContent").each(function() {
        if ($(this).find(".btn").length) {

            var $fade = $(this).find("div.btn a > span.hover");
            var $title = $(this).find("h1, h2, h3, h4, h5");
            var $span = $(this).find("span").not("span.hover");
            var $text = $(this).find("p");

            var titleColor = $title.css('color');
            var spanColor = $span.css('color');

            $(this).css({'cursor':'pointer'}).bind({
                mouseenter:function() {
                    $text.stop().animate({color:linkHover},textAnim);
                    $title.stop().animate({color:linkHover},textAnim);
                    $span.stop().animate({color:linkHover},textAnim);
                    $fade.stop(true,true).fadeIn(textAnim);
                }, mouseleave:function() {
                    $text.stop().animate({color:linkColor},textAnim);
                    $title.stop().animate({color:titleColor},textAnim);
                    $span.stop().animate({color:spanColor},textAnim);
                    $fade.stop(true,true).fadeOut(textAnim);
                }, focusin:function() {
                    $text.stop().animate({color:linkHover},textAnim);
                    $title.stop().animate({color:linkHover},textAnim);
                    $span.stop().animate({color:linkHover},textAnim);
                    $fade.stop(true,true).fadeIn(textAnim);
                }, focusout:function() {
                    $text.stop().animate({color:linkColor},textAnim);
                    $title.stop().animate({color:titleColor},textAnim);
                    $span.stop().animate({color:spanColor},textAnim);
                    $fade.stop(true,true).fadeOut(textAnim);
                }
            }).click(function() { …

我有一个<button>元素,其中有2个<span>元素.我为每个span元素都有2个附加的jquery click事件处理程序,所以我可以为每次点击做任何我喜欢的事情.以下是基本代码的快速浏览:

HTML

<button>
    <span>Text1</span>
    <span>Text2</span>
</button>

使用Javascript

$(function() {
    $('button').bind('click', function() {
        console.log('button clicked');
    });
    $('button > span:eq(0)').bind('click', function() {
        console.log('text1 span clicked');
    });
    $('button > span:eq(1)').bind('click', function() {
        console.log('text2 span clicked');
    });
});

这在Chrome中运行良好,点击事件以正确的顺序捕获:首先在任何span元素上,然后事件冒泡到父按钮元素.

问题是在Firefox中,click事件不会触发任何span元素,只是按钮事件处理程序将事件记录为触发.

这是一个小提琴,所以你可以看到我的意思:http://jsfiddle.net/spider/RGL7a/2/

谢谢

我创建了一组嵌套组件.

代码在这里:http://emberjs.jsbin.com/hasehija/2/edit.

HTML:

{{#level-1}}
    {{#level-2}}
      {{#level-3}}
        <button {{action 'handleAction'}}>
          Click me (yielded)
        </button>
      {{/level-3}}
    {{/level-2}}
 {{/level-1}}

JS:

App.ApplicationController = Ember.Controller.extend({
  actions: {
    handleAction: function() {
      alert('Handled in ApplicationController');
    }
  }
});

App.Level1Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 1');
    }
  }
});

App.Level2Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 2');
    }
  }
});

App.Level3Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 3');
      this.set('action', 'handleAction');
      this.sendAction(); …

我遇到以下问题:

当我拿到两个标签时:

<Label x:Name="First" MouseUp="Label_MouseUp">
    <Label x:Name="Second" MouseUp="Label_MouseUp_1">This is a label into another label</Label>
</Label>

以下代码:

private void Label_MouseUp(object sender, MouseButtonEventArgs e)
{
    Console.WriteLine("Do NOT show me");
}

private void Label_MouseUp_1(object sender, MouseButtonEventArgs e)
{
    Console.WriteLine("Show me");
}

当我点击"秒"时,我希望它只触发"Label_MouseUp_1".但在我的控制台中,我得到:

告诉我
不要告诉我

有没有办法关闭冒泡事件？

(另外,"First"必须是可点击的,所以删除那里的事件并不能解决问题)

日Thnx

今天我有一些理论问题.为什么滚动事件不会冒泡？它与性能问题有关吗？我做了一些挖掘,但遗憾的是没有找到任何可以满足我的好奇心的答案.

谢谢你的回复:)

我正在 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，但它似乎在错误的方向上“阻止传播”。它阻止 的所有 …