如何存储和禁用另一个元素的临时事件
How Store and Disable Event of another element Temporary
我正在寻找一种方法来管理事件。我有元素a的悬停功能,并单击元素b的功能。我想暂时禁用a的悬停功能,而第二次单击b
我正在寻找一种不需要重写b内部a的孔函数的方法,非常简单,就像"存储和禁用事件,调用存储函数"
我发现了一些技术,如。data('events')和console.log。我累了,但失败了,或者我写错了。
请帮助和建议!
$(A).hover();
$(b).click(
if($.hasData($(A)[0])){ // if A has event,
//STORE all the event A has, and disable
}else{
//ENABLE the stored event for A
}
);
试试这个
var hoverme = function() {
alert('Hover Event Fired');
};
$('.A').hover(hoverme);
var i = 0;
$('.B').on('click', function(){
if(i%2 === 0){
// Unbind event
$('.A').off('hover');
}
else{
// Else bind the event
$('.A').hover(hoverme);
}
i++;
});
检查小提琴
我认为你应该这样做(以JQuery 1.7.2为例):
$("#a").hover(function(){alert("test")});
$("#a")[0].active=true;
$("#b").click(function(){
if($("#a")[0].active){
$("#a")[0].storedEvents = [];
var hoverEvents = $("#a").data("events").mouseover;
jQuery.each(hoverEvents , function(key,handlerObj) {
$("#a")[0].storedEvents.push(handlerObj.handler);
});
$("#a").off('hover');
}else{
for(var i=0;i<$("#a")[0].storedEvents.length;i++){
$("#a").hover($("#a")[0].storedEvents[i]);
}
}
$("#a")[0].active = ($("#a")[0].active)==false;
});
JSFiddle例子
但是有几件事你必须考虑:
- 这将只工作,如果你添加的事件与JQuery,因为JQuery保持一个内部跟踪的事件处理程序已添加。
- 每个版本的JQuery处理
data("events")
不同,这意味着该代码可能无法与其他版本的JQuery工作。
我希望这对你有帮助。
编辑: data("events")
是JQuery 1.6和JQuery 1.7中使用的内部未记录的数据结构,但在JQuery 1.8中已被删除。因此,在JQuery 1.8中,访问事件数据的唯一方法是:$._data(element, "events")
。但是请记住JQuery文档中的建议:这不是一个受支持的公共接口;
您可以尝试在函数a和b范围之外设置一个变量,并使用该变量触发函数b对函数a采取的操作。
var state;
var a = function() {
if(!state) {
state = true;
// Add hover action and other prep. I'd create a third function to handle this.
console.log(state);
};
var b = function() {
if(state) {
state = false;
// Do unbinding of hover code with third function.
} else {
state = true;
// Do whatever else you needed to do
}
}
如果不知道你想做什么,我也会尝试类似的事情。
如果单击B,则要禁用单击悬停事件。
$("body").on("hover", "#a", function(){
alert("hovering");
});
$("#b").click( function(){
$("body").off("hover", "#a", function() {
alert("removed hovering");
});
});
可以使用jQuery的off方法,来看看这个。http://jsfiddle.net/nKLwK/1/
定义一个函数来指定悬停在a元素上,所以在b点击,调用unbind('hover')为a元素,在第二点击b元素再次定义一个函数来悬停,像这样:
function aHover(eventObject) {
// Todo when the mouse enter object. You can use $(this) here
}
function aHoverOut(eventObject) {
// Todo when the mouse leave the object. You can use $(this) here
}
$(A).hover(aHover, aHoverOut);
// ...
$(b).click(function(eventObject) {
if($.hasData($(A)[0])){ // if A has event,
$(A).unbind('mouseenter mouseleave'); // This is because not a event hover, jQuery convert the element.hover(hoverIn, hoverOut) in element.bind('mouseenter', hoverIn) and element.bind('mouseleave', hoverOut)
}else{
$(A).hover(aHover, aHoverOut);
}
});
有更好的方法可以做到这一点,但这工作得很好,在文档就绪时这样做:
$("#a")[0].active=false;
$("#b").click(function(){
$("#a")[0].active = ($("#a")[0].active)==false;
if($("#a")[0].active){
$("#a").hover(function(){alert("test")});
}else{
$("#a").off('hover');
}
});
JSFiddle示例
你可以使用jQuery的。off函数来解除悬停在"a"元素上的绑定。
function hoverA() {
alert('I''m on hover');
}
$('#a').hover( hoverA );
var active = true;
$('#b').on('click', function(){
if(active){
$('#a').off('hover');
active = false;
} else{
$('#a').hover(hoverA);
active = true;
}
});
现场演示可在这里:http://codepen.io/joe/pen/wblpC
- 使用clickToggle并在单击另一个元素时关闭元素
- 按我自己的类克隆另一个元素的内容和顺序
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 使用svg和javascript将一个类的元素动画化为另一个类
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- jquery从另一个元素中移除移除
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 使用数据属性将HTML数据复制到另一个元素
- 如何从另一个带下划线的数组中筛选带元素的数组
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 只要存在,就用另一个元素替换一个元素
- 检查一个元素是否有一个类与另一个类总是返回true
- 初学者反应查询(如何删除一个元素并附加另一个元素)
- 将jquery ui窗口的父元素设置为另一个元素
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- Pixijs将元素附加到另一个元素
- 将SVG元素拖动到另一个SVG元素上
- JavaScript:将输入范围行为链接到另一个元素