标签: event-bubbling

我在div中输入了文本。单击输入应将其设置为焦点并停止div click事件的冒泡。我尝试了stopPropagationand preventDefault在文本输入事件上，但无济于事。控制台日志显示div单击仍然执行。如何停止div点击事件的执行？

// html
<div (click)="divClick()" >
  <mat-card mat-ripple>
    <mat-card-header>
      <mat-card-title>
        <div style="width: 100px">
          <input #inputBox matInput (mousedown)="fireEvent($event)" max-width="12" />
        </div>
      </mat-card-title>
    </mat-card-header>
  </mat-card>
</div>


// component
@ViewChild('inputBox') inputBox: ElementRef;
divClick() {
    console.log('click inside div');
}

fireEvent(e) {
    this.inputBox.nativeElement.focus();
    e.stopPropagation();
    e.preventDefault();
    console.log('click inside input');
    return false;
}

请阅读这篇文章.我有同样的问题,如本文所述,但我试图在VB.net而不是c#.

我很确定这样做我必须使用自定义事件.(我使用代码转换站点来了解自定义事件.)因此在IDE中键入以下内容时:

公共自定义事件AddRemoveAttendees As EventHandler

它扩展为以下代码段.

Public Custom Event AddRemoveAttendees As EventHandler
    AddHandler(ByVal value As EventHandler)

    End AddHandler

    RemoveHandler(ByVal value As EventHandler)

    End RemoveHandler

    RaiseEvent(ByVal sender As Object, ByVal e As System.EventArgs)

    End RaiseEvent
End Event

但我无法弄清楚如何处理它.直到今天,我从未听说过自定义事件.

我想要的底线是让按钮的click事件冒泡到用户控件的容器.我知道我可以包装自己的活动但我至少想在我走得更远之前了解自定义事件.

赛斯

我有一个TreeView绑定到一个层次结构,通过HierarchicalDataTemplates 包含几个不同的类.当选择树中的项目时,SelectedItemChanged事件当然会愉快地通过父项向上冒泡,就像它应该的那样.它应该有什么不能做的,但仍然没有,正高兴地保持在起泡后,我设置e.Handled到true.

该事件仍将在父项上触发,其RoutedPropertyChangedEventArgs外观与所选的父项完全相同; 甚至OriginalSource属性也将指向父项,而不是最初选择的项.e.Handled当然会false.

几乎同样的问题在这里被问到,但我没有使用EventAggregator或CAL,这里找到的解决方法没有多大帮助,因为我并不是专门针对鼠标事件.

有没有办法精确地获得实际选择的项目或强行停止冒泡的疯狂(不使用我能想到的全局变量的非常暴力和不道德的黑客)？

感谢您的任何见解.

我最近发现了使用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没有处理捕获).

我知道一个事件有两种模式 - 冒泡和捕捉.

当事件设置为冒泡时,Javascript会检查"文档"吗？

当事件设置为捕获时,Javascript是否始终从"文档"开始？

Javascript如何知道停止/启动的位置？

更新:

假设我的body标签中有以下代码.

<div id='outer'>
    <div id='inner'></div>
</div>

当我将一个事件设置为#inner来冒泡时,Javascript会检查文档还是停在#outer？

我正在玩AngularJS框架,我偶然发现了一个问题.我做了一个名为'enter'的指令.它触发mouseenter和的功能mouseleave.我将它作为属性应用于表行元素.它现在为每个子元素(所有列等)触发,但只有当您将鼠标放在表行上时才应触发它.

这是我的指令的样子:

myapp.directive('enter', function(){
    return {
        restrict: 'A', // link to attribute... default is A
        link: function (scope, element){
            element.bind('mouseenter',function() {
                console.log('MOUSE ENTER: ' + scope.movie.title);
            });
            element.bind('mouseleave',function() {
                console.log('LEAVE');
            });
        }
    }
});

这是一个例子:http: //jsfiddle.net/dJGfd/1/

您必须打开Javascript控制台才能看到日志消息.

在AngularJS中实现我想要的功能的最佳方法是什么？如果有合理的AngularJS解决方案,我更喜欢不使用jQuery.

很多人都解释说e.stopPropagation()可以防止事件冒泡.但是,我很难找到为什么人们想要或者想要首先阻止事件冒泡.

在我的网站上,我有许多元素,如下所示:

$(document.body).on('click', ".clickable", function(e){ 
   //e.stopPropagation();
  //do something, for example show a pop-up or click a link   
});

<body>
  <p>outside stuff</p>
  <button type="button" class='clickable'>
    <img src='/icon.jpg'> Do Something

  </button>
</body>

我想添加e.stopPropagation()因为我想要将事件处理程序更改'touch'为'click'使用这个真棒触摸库Hammer.js..这将允许点击在桌面上正常发生以及在移动设备上进行触摸事件.

这个问题(请纠正我,如果我错了)是触摸设备上的滚动减慢停止.

这e.stopPropgation()有用吗？这样,无论何时触摸屏幕 - document.body事件冒泡都不会每次都发生？

我正在使用jQuery Mobile并创建了一些类似于Android Holo Tabs的东西:

http://note.io/18RNMRk

为了使滑动手势能够在标签之间切换,这是我添加的代码:

$("#myPage #pageTabs").on('swipeleft swiperight', function(e){
    e.stopPropagation();
    e.preventDefault();
});
$("#myPage").on('swipeleft', function(){
    ui.activities.swipe(1);
}).on('swiperight', function(){
    ui.activities.swipe(-1);
});

标签的HTML类似于:

<div id="pageTabs">
    <div class="tab">
        <a href="#" data-dayOfMonth="26">Thu</a>
    </div>
    <div class="tab">
        <a href="#" data-dayOfMonth="27">Fri</a>
    </div>
    <div class="tab">
        <a href="#" data-dayOfMonth="28" data-meridian="am">Sat AM</a>
    </div>
    <div class="tab">
        <a href="#" data-dayOfMonth="28" data-meridian="pm">Sat PM</a>
    </div>
    <div class="tab">
        <a href="#" data-dayOfMonth="29">Sun</a>
    </div>
</div>

我正在侦听页面级别的滑动手势,因为div[data-role=content] 如果没有足够的内容,有时可能无法垂直填充屏幕.如果我听了这个div并且没有覆盖屏幕,并且你靠近底部滑动,事件将不会触发此div,它将在根页面上(div[data-role=page]).

这是Firefox对该页面的3D渲染,用于证明上述断言.我注释了 div[data-role=content]:

http://note.io/18RPhyK

出于这个原因,我正在页面层面上听它; 但由于标签的数量可以滚出视口(如上图所示:星期日在屏幕右侧),我希望用户能够水平滚动它.我已经有了水平滚动工作(这只是一些简单的CSS),但问题是,即使我e.stopPropagation()上面看到,滑动手势冒泡到页面元素,我的滑动手势阻止了平滑滚动在我添加滑动手势之前可用.

我是否误解了事件冒泡是如何工作的,或者在这种情况下如何阻止事件冒泡？

我试图阻止特定的点击事件从冒泡到文档根,结果关闭了我的一个弹出窗口.我需要停止冒泡活动,body或者html是我唯一可以拦截并阻止它的选项.

动态生成日期选择器弹出窗口,因此我无法在.ui-icon元素上使用直接事件,因此我在元素上注册了一个委托事件body以阻止它冒泡.

(function ($) {
    $(function () {
        $('body').on('click', '.ui-icon', function (e) {
            e.stopPropagation();
        });
    });
})(jQuery);

令人惊讶的是,将直接事件注册到body元素并检查事件的目标就可以了.

(function ($) {
    $(function () {
        $('body').on('click', function (e) {
            if ($(e.target).is('.ui-icon')) {
                e.stopPropagation();
            }
        });
    });
})(jQuery);

我真的很茫然,为什么前一个不适用于后者,两者都应该做同样的事情.我错过了什么？它可能与jQuery datepicker在事件到达正文之前重组(其整个内容块在导航上重建)有关(但它没有意义)？

下面添加了该问题的代码段.我只想让箭头(datepicker导航)停止冒泡到文档/根级别(关闭我的弹出窗口),并且因为datepicker被附加到body,唯一可用的拦截点是body/html.

$(function() {
  let popup = $('#some-popup').addClass('visible');
  let input = $('#some-date');
  let toggler = $('#toggler');

  // binding popup
  toggler.on('click', function(e) {
    e.stopPropagation();
    popup.toggleClass('visible');
  });

  // initializing jQuery UI datepicker
  input.datepicker();

  // closing …

我有一个 div，其中有一个 Material ui Select、Material ui TextField 和一个纯 html 选择。这个 div 有一个 onchange 事件，它只是控制台记录event.target.value。当材质 ui TextField 的 onchange 或选择被触发时，event.target.value会记录到控制台。但不适用于material ui select的onchange。

示例代码：https://codesandbox.io/s/material-demo-03495? file=/demo.tsx

我在这里缺少什么？

谢谢。