gpt4 book ai didi

javascript - 来自同一元素上两个脚本的单击事件?

转载 作者:行者123 更新时间:2023-12-03 11:40:14 24 4
gpt4 key购买 nike

编辑:我想我找到了解决方案!在寻求进一步帮助之前,我想尝试自己解决这个问题 = )

第一个脚本禁止第二个脚本运行,因为第一个脚本的点击事件覆盖了第二个脚本。由于第二个不起作用,因此无法打开下拉菜单来选择列表项来触发第一个脚本单击。

我尝试用 event.stopPropagation() 替换所有 return false 语句。然而没有用。尝试重新排序我的脚本,但也失败了。我正在考虑让我的第二个脚本针对另一个父 div,但这也不起作用。我还尝试了 event.stopImmediatePropagation() 和 .bind 方法。

有什么想法吗?

第一个实现下拉功能的脚本。包含点击事件。

    function DropDown(el) {
this.f = el;
this.placeholder = this.f.children('span');
this.opts = this.f.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;

obj.f.on('click', function(event){
$(this).toggleClass('active');
return false;
});

obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}

$(function() {

var f = new DropDown( $('#f') );

$(document).click(function() {
// all dropdowns
$('.filter-buttons').removeClass('active');
});

});

执行过滤的第二个脚本,还包含点击事件:

jQuery(document).ready(function(e) {
var t = $(".filter-container");
t.imagesLoaded(function() {
t.isotope({
itemSelector: "figure",
filter: "*",
resizable: false,
animationEngine: "jquery"
})
});
$(".filter-buttons a").click(function(evt) {
var n = $(this).parents(".filter-buttons");
n.find(".selected").removeClass("selected");
$(this).addClass("selected");
var r = $(this).attr("data-filter");
t.isotope({
filter: r
});
evt.preventDefault();
});
$(window).resize(function() {
var n = $(window).width();
t.isotope("reLayout")
}).trigger("resize")
});

html结构

<div id="f" class="filter-buttons" tabindex="1">
<span>Choose Genre</span>
<ul class="dropdown">
<li><a href="#" data-filter="*" class="selected">All</a></li>
<li><a href="#" data-filter=".electronic">Electronic</a></li>
<li><a href="#" data-filter=".popular">Popular</a></a></li>
</ul>
</div>

最佳答案

这并不能真正解决你的问题,但我喝咖啡的时候很无聊,想帮助你把你的下拉插件写得更好一点

我下面的评论与代码内嵌。对于不间断的代码,请参阅DropDown complete paste .

<小时/>

我们从标准 jQuery 包装器开始 (function($){ ... })(jQuery)

(function($) {

// dropdown constructor
function DropDown($elem) {

首先我们将创建一些私有(private)变量来存储信息。通过使用 this.foo = ... ,我们(可能)暴露了不必要的东西。如果您需要访问这些变量,您始终可以创建函数来读取它们。在我看来,这是更好的封装。

    // private vars
var $placeholder = $elem.children("span");
var $opts = $elem.find("ul.dropdown > li")
var value = "";
var index = -1;

现在我们将定义事件监听器以及这些事件监听器可能依赖的函数。这里的好处是这些函数不必通过 this.* 或您编写 obj.f.* 等访问所有内容。

    // private functions
function onParentClick(event) {
$elem.toggleClass("active");
event.preventDefault();
}

function onChildClick(event) {
setValue($(this));
event.preventDefault();
}

function setValue($opt) {
value = $opt.text();
index = $opt.index();
$placeholder.text(value);
}

这是一些用于读取索引的属性描述符

    // properties for reading .index and .value
Object.defineProperty(this, "value", {
get: function() { return value; }
});

Object.defineProperty(this, "index", {
get: function() { return index; }
});

最后,让我们跟踪数组中 DropDown 的每个实例,以便用户不必定义特殊的监听器来停用每个实例

    // track each instance of
DropDown._instances.push(this);
}

这是我们将用来跟踪实例的数组

  // store all instances in array
DropDown._instances = [];

此事件监听器停用 DropDown 的每个“注册”实例

  // deactivate all
DropDown.deactiveAll = function deactiveAll(event) {
$.each(DropDown._instances, function(idx, $elem) {
$elem.removeClass("active");
});
}

这是在插件中定义的文档监听器!用户不再需要进行设置

  // listener to deactiveAll dropdowns
$(document).click(DropDown.deactiveAll);

不妨将其设为 jQuery 插件,因为 DropDown 构造函数中的所有内容都依赖于 jQuery。这让用户可以执行 var x = $("foo").dropdown();

  // jQuery plugin
$.fn.dropdown = function dropdown() {
return new DropDown($(this));
};

关闭包装器

})(jQuery);
<小时/>

现在介绍一下如何使用它

$(function() {
var x = $('#f').dropdown();

// get the value
f.value;

// get the index
f.index;
});
<小时/>

无论如何,是的,我知道这对您的点击监听器并没有真正的帮助,但我希望这对您仍然有用。现在就去邮局吧!

关于javascript - 来自同一元素上两个脚本的单击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26316109/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com