JQuery 停止方法调用中的事件冒泡

发布于 2024-12-05 15:34:14 字数 1043 浏览 0 评论 0原文

我试图了解 jquery 插件结构并编写了以下 HTML 代码，该代码形成了幻灯片的开头：

<div id="bubble" style="width: 200px; height: 200px; background: #ccc;"></div>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
    $(function() {
        $(document).ready(function() {
            $("#bubble").bubble();
    });
});
})(jQuery);
</script>

这链接到以下 jquery 插件代码：

(function($){
var i = 0;

var methods = {
    mouseup: function(e){
        $(this).bubble('next');
        e.stopPropagation();
    },
    mousedown: function(e){
        $(this).bubble('next');
        e.stopPropagation();
    },
    next: function(){
        console.log(i++);
    }
};

$.fn.bubble = function(method){
    $(this).bind("mouseup", methods.mouseup)
          .bind("mousedown", methods.mousedown);

    if ( methods[method] ) {
    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } 
};

})(jQuery);

我不知道为什么，但单击气泡框会调用多次迭代下一个：方法。有没有办法限制调用 next: 方法的次数？

原文

I am trying to get my head around the jquery plugin structure and wrote the following HTML code which forms the start of a slideshow:

<div id="bubble" style="width: 200px; height: 200px; background: #ccc;"></div>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
    $(function() {
        $(document).ready(function() {
            $("#bubble").bubble();
    });
});
})(jQuery);
</script>

This is linked to the following jquery plugin code:

(function($){
var i = 0;

var methods = {
    mouseup: function(e){
        $(this).bubble('next');
        e.stopPropagation();
    },
    mousedown: function(e){
        $(this).bubble('next');
        e.stopPropagation();
    },
    next: function(){
        console.log(i++);
    }
};

$.fn.bubble = function(method){
    $(this).bind("mouseup", methods.mouseup)
          .bind("mousedown", methods.mousedown);

    if ( methods[method] ) {
    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } 
};

})(jQuery);

I'm not sure why but clicking the bubble box calls multiple iterations of the next: method. Is there a way to limit the number of calls to the next: method?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扎心 2024-12-12 15:34:14

您将 mousedown 和 mouseup 绑定到 next 函数，这将每次点击发送两个 next 函数，我不知道我认为你无意这样做。

要修复此问题，请删除其中一个绑定，或者仅绑定click。

回复收藏 0 原文

等风也等你 2024-12-12 15:34:14

也许您应该使用 stopImmediatePropagation() 这样您只需记录两次（因为您调用了 next()两次）：

(function($){
var i = 0;

var methods = {
    mouseup: function(e){
        $(this).bubble('next');
        e.stopImmediatePropagation();
    },
    mousedown: function(e){
        $(this).bubble('next');
        e.stopImmediatePropagation();
    },
    next: function(){
        console.log(i++);
    }
};

$.fn.bubble = function(method){
    $(this).bind("mouseup", methods.mouseup)
          .bind("mousedown", methods.mousedown);

    if ( methods[method] ) {
    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    }
};

})(jQuery);

小提琴：http://jsfiddle.net/k3FhM/

Maybe you should use stopImmediatePropagation() so that you just log twice (because you call next() twice):

(function($){
var i = 0;

var methods = {
    mouseup: function(e){
        $(this).bubble('next');
        e.stopImmediatePropagation();
    },
    mousedown: function(e){
        $(this).bubble('next');
        e.stopImmediatePropagation();
    },
    next: function(){
        console.log(i++);
    }
};

$.fn.bubble = function(method){
    $(this).bind("mouseup", methods.mouseup)
          .bind("mousedown", methods.mousedown);

    if ( methods[method] ) {
    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    }
};

})(jQuery);

fiddle: http://jsfiddle.net/k3FhM/

回复收藏 0 原文

~没有更多了~