标签: stoppropagation

由于代码优于1000字,我创建了一个plunker以显示我的问题:http://bit.ly/1uiR2wy

给定特定的DOM元素,事情就是我有一个带有ng-change的输入复选框,我想添加一个ng-click到包含它的li,以便能够在整个区域中单击.这个新的ng-click使ng-change中的方法发生两次.对于正在发生3次的SPAN描述2来说更糟糕的是.

<li class="odd" ng-click="changeToggleModel($event)">
  <span class="overcomeDescription ellipsis-overflow">span description</span>
  <label>      
    <span>SPAN DESCRIPTION 2</span>
    <input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
  </label>
</li>

我尝试过stopPropagation,似乎没有解决问题.关于它的任何想法？如果您检查了plunker并打开控制台,您将完全看到问题.

在此先感谢大家

我有这个代码在Safari和Chrome上运行,但在Firefox中没有.Firefox是否遇到StopPropagation()问题？

$(function() {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();

    // Fix input element click problem
    $('.login-menu form').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });
});?

我有以下 angular2 模板：

<div (click)="foo()">
   <img (longPress)="bar(1)" (click)="foobar(1)" />
   <img (longPress)="bar(2)" (click)="foobar(2)"/>
</div>

Longpress 是一个自定义属性指令，当鼠标按下 500 毫秒时触发。

<div>和上的点击事件<img>处理得很好。当我长按图像时，会调用 bar() 函数。但是，在 mouseUp 上（长按后），将在<img>和 父级上触发单击事件<div>。

如何以最简单的方式阻止这些点击事件。

我现在唯一能想到的就是编写一个自定义属性指令，仅在不到 500 毫秒的“点击”时触发。这对我来说似乎有点过分了。

根据jQuery 文档

从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。false 值也可以作为 function(){ return false; 的简写传递给处理程序。}. 所以， $("a.disabled").on("click", false); 将事件处理程序附加到所有具有“禁用”类的链接，以防止在单击它们时跟踪它们，并阻止事件冒泡。

所以当我创建一个点击事件时：

$('#sidebar').on("click", ".toggle", function() {
    $(this).parents("p").next("ul").toggle(400);
    return false;
});

我希望点击不会注册，因为它没有机会传播.toggle到#sidebar

我想出的唯一解释是，如果允许这种情况发生，它会使该on()功能变得毫无意义，所以在这种情况下它可能会被绕过？

on()就冒泡而言，遵循什么规则？

我刚注意到一些不寻常的事 这就是我想要完成的事情:

• 我想在点击链接时显示div

• 当我点击文档中的其他位置时,我希望div消失

• 当我点击div本身时,我不希望它消失

像这样的东西:

http://jsfiddle.net/XPmyF/

JS:

(function() {
    var box = $('#box');
    $(document).on('click', function() {
        if (box.css('display') == 'block') {
            box.css('display', 'none');
        }
    });
    $('#start').on('click', function(e) {
        box.css({
            'text': 'Box',
            'position': 'absolute',
            'top': '50px',
            'left': '0',
            'background': '#EEE',
            'border': '1px solid #555',
            'width': '200px',
            'height': '50px',
            'display': 'block'
        });
        e.stopPropagation();
    });

    box.on('click', function(e) {
        e.stopPropagation();
    });
})();?

这个小提琴工作得很好但是当我在Firefox(15.0.1)中测试它时,如果你右键点击div,它会消失,这不是我正在寻找的行为.似乎stopPropagation()适用于点击,但不适用于Firefox中的右键单击.Chrome会将右键单击传播到文档.

我该如何解决？

谢谢

我想知道当它们到达某个元素时如何阻止所有类型事件的传播.

我曾想过

function stop(e){
    e.stopPropagation();
}
function stopEvents(el){
    var events = ['click', 'mousemove', ...];
    for(var i=0; i<events.length; ++i){
        el.addEventListener(events[i], stop, false);
    }
}

有更聪明的方法吗？

看来,我的代码工作,但我想,不需要所有可能的事件列表的代码.

因为如果我写一个其他人可以用来向页面添加内容的GreaseMonkey模块,我不希望在该内容中生成的事件触发页面的事件监听器(假设他们不使用捕获).实际上我使用iframe解决了它,但问题仍然存在于学术目的

我正在阅读Aaron Gustafson写的一本名为"自适应网页设计"的书,因为我得到了一段我不理解的javascript.在研究时我发现了返回false和e.preventDefault之间的区别.我现在也对JavaScript的冒泡效果有了一点了解,并开始明白要停止冒泡,你可以使用e.stopPropagation()(在无至少的浏览器中).

我在小提琴里玩,但我无法让它工作.我认为它可能与bubbeling生效的方式有关(从root到元素然后回来？).

document.body.onclick = function (e) {
    alert("Fired a onclick event!");
    e.preventDefault();
    if ('bubbles' in e) { // all browsers except IE before version 9
        if (e.bubbles) {
            e.stopPropagation();
            alert("The propagation of the event is stopped.");
        } else {
            alert("The event cannot propagate up the DOM hierarchy.");
        }
    } else { // Internet Explorer before version 9
        // always cancel bubbling
        e.cancelBubble = true;
        alert("The propagation of the event is stopped.");
    }
}

这是小提琴:http://jsfiddle.net/MekZii/pmekd/(固定链接)编辑:我复制粘贴了错误的链接!现在修好了!

所以我想看到的是,当你点击锚点时,div上使用的onclick不会被执行(这不是一个实际案例,只是一个研究案例!)

我有这个代码：

$('.panel-select').click(function() {
  $(this).children('input').trigger('click');
});

但是我得到了 RangeError: Maximum call stack size exceeded。我用谷歌搜索了一些，发现事件在 DOM 中冒泡。

我试图阻止它，但我没有成功。我试过这个：

$('.panel-select').click(function(e) {
  e.stopPropagation();
  $(this).children('input').trigger('click');
});

但它不起作用。我该怎么做？

我用angular 2和PrimeNG构建了我的应用程序。我尝试使用按钮单击指令来检查用户权限。问题是；如果没有权限，请不要继续执行按钮单击操作。但是stopPropagation不会停止click事件。如果checkAuth（）返回false，如何停止进程？

块引用

@Directive({
    selector: '[checkAuthOnClick]'
})

export class CheckAuthorizationOnClickDirective {

    user: Observable<User>;
    @Input() allowedClaim: any;
    observer: MutationObserver;

    constructor(private element: ElementRef, private store: Store<fromRoot.State>) {
        this.element = element.nativeElement;
    }

    @Output()
    stop: EventEmitter<Event> = new EventEmitter;

    @HostListener('click', ['$event, $event.target'])
    onClick(event, targetElement) {  
        if (!this.checkAuth()) {
            event.stopPropagation();
            event.preventDefault();
            event.cancelBuble = true;
            event.stopImmediatePropagation();

            this.stop.emit(event);
        }
    }   

    private checkAuth(): boolean {
        this.user = this.store.select(fromRoot.currentUser);
        if (this.user != undefined && this.allowedClaim != undefined) {
            var hasClaim = false;
            var description;
            this.user.subscribe(x => {
                if (Array.isArray(this.allowedClaim)) …

我们可以使用event.stopPropagation（）来停止事件冒泡。我们也可以使用相同的方法来停止事件捕获吗？

如果没有，我们怎么能做到呢？