如何正确使用jQuery off（）方法从元素中删除鼠标输入和Mouseleave事件
我似乎在使用jQuery off（）方法从元素中删除某些事件时遇到了一些问题。当我符合特定条件时，我想删除mouseenter和mouseleave事件。
这是我得到的。
jsfiddle：http://jsfiddle.net/GE7Wg/
在上述情况下，第2条不应包含与之相关的mouseenter/mouseleave事件。
谢谢
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="hidden" id="HiddenMediaID" value="450">
<article class="Article">
Article 1
<input type="hidden" class="LatestMediaID" value="200" />
</article>
<article class="Article">
Article 2
<input type="hidden" class="LatestMediaID" value="450" />
</article>
<article class="Article">
Article 3
<input type="hidden" class="LatestMediaID" value="700" />
</article>
</body>
</html>
//Page loaded - jQuery Ready
$(document).ready(function () {
//User hovering over article. Change BG.
$(document).on('mouseenter', '.Article', function () {
$(this).css('background', '#F0F8FF');
}).on('mouseleave', '.Article', function () {
$(this).css('background', '#FFFFFF');
});
//Set active BG color if condition is met.
$('.LatestMediaID').each(function () {
var LatestMediaID = $(this).val();
//Disable mouseenter and mouseleave events on the matched Article.
if (LatestMediaID == $('#HiddenMediaID').val()) {
//Disable events.
$(document).off('mouseenter', $(this).parent());
$(document).off('mouseleave', $(this).parent());
//Change BG color to light blue.
$(this).parent().css('background', '#F0F8FF');
}
});
});
.Article {
width: 150px;
height: 35px;
line-height: 35px;
margin: 10px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
text-align: center;
}
共有3个答案
有一种方法可以通过在所选文章级别上添加另一个事件来按照您的方式完成此操作http://api.jquery.com/event.stopPropagation/从那里开始，但塔斯真的很丑。通过CSS处理此问题更为简洁http://jsfiddle.net/liho1eye/GE7Wg/4/
.selected, .hover { background-color:#F0F8FF;}
脚本：
$(document).on('mouseenter mouseleave', '.Article', function(e) {
$(this).toggleClass("hover", e.type == "mouseenter");
});
不确定是什么导致了问题，但您可以通过预先检查值来避免添加事件。
可能会使用以下内容：
$(function() {
var hidID = $("#HiddenMediaID").val();
$(".Article").each(function(){
var article = $(this);
if(article.find(".LatestMediaID").val() !== hidID)
{
article.on("mouseenter", function(){ article.css("background", "#F0F8FF") });
article.on("mouseleave", function(){ article.css("background", "#FFFFFF") });
}
});
});
让我们做一些DOM操作并抛出一些条件
//Page loaded - jQuery Ready
$(document).ready(function () {
//User hovering over article. Change BG.
$(document).on('mouseenter', '.Article', function () {
if( !( $(this).hasClass('donotSelect') ) )
$(this).css('background', '#F0F8FF');
else
$(document).off('mouseleave', $(this));
}).on('mouseleave', '.Article', function () {
if( !( $(this).hasClass('donotSelect') ) )
$(this).css('background', '#FFFFFF');
else
$(document).off('mouseenter', $(this));
});
//Set active BG color if condition is met.
$('.LatestMediaID').each(function () {
var LatestMediaID = $(this).val();
//Disable mouseenter and mouseleave events on the matched Article.
if (LatestMediaID == $('#HiddenMediaID').val()) {
$(this).parent().addClass("donotSelect");
//Change BG color to light blue.
$(this).parent().css('background', '#F0F8FF');
}
});
});
http://jsfiddle.net/GE7Wg/5/
-
我的问题是： 我的解决方案是使用mousewheel/scroll事件处理程序来知道用户是否在移动，然后计算我是否在页面底部并隐藏或显示元素。。。 一切正常，但我有点担心 由于主线程正忙，“mousewheel”输入事件的处理延迟了123毫秒。将事件处理程序标记为“被动”以使页面更加响应。 这（我猜）是因为这个代码 跑太多次了。 那么，我怎样才能使这段代码更有效率呢 是否有办法在滚动后运行事件？
-
因此，我有一个#container div的简单设置，其中包含一个#field div。我还有一个不可见的#悬停范围，它跟随鼠标移动（居中）并在#field上悬停时可见。 HTML： JS公司： 当我在场地上悬停时，只要我移动鼠标，它就会触发无数的mouseenter和mouseleave（预期的mousemove）事件。这似乎是因为#悬停范围以鼠标为中心，每次移动鼠标时，我都会离开#字段并输入#
-
问题内容： 我正在尝试使用Selenium WebDriver将文本输入具有默认文本“ Enter User ID”的GWT输入元素。以下是我尝试使其工作的几种方法： 奇怪的是，上面这仅在某些时间有效。有时，它最终会搜索“输入用户IDus”，基本上是在默认文本后开始键入“用户名”，甚至没有完成。 还有其他更好，更可靠的方法来清除GWT元素中的默认文本吗？ 编辑添加： 输入元素的HTML。不幸的是，
-
问题内容： 我陷入了XML和Python的困境。任务很简单，但到目前为止我还无法解决，花了那么长时间。我是来这里咨询如何用几行解决它的。 感谢您对遍历树的任何帮助。我总是以太多或太少的元素结束。元素可以无限制地嵌套。给出的例子只是一个例子。我会接受任何解决方案，而不是对dom，minidom，sax等等不挑剔。 我有一个与此类似的XML文件： 我需要的是-解析XML并编写一个新文件。新文件应包含给
-
本文向大家介绍正确遍历删除List中的元素方法(推荐)，包括了正确遍历删除List中的元素方法(推荐)的使用技巧和注意事项，需要的朋友参考一下 遍历删除List中的元素有很多种方法，当运用不当的时候就会产生问题。下面主要看看以下几种遍历删除List中元素的形式： 1.通过增强的for循环删除符合条件的多个元素 2.通过增强的for循环删除符合条件的一个元素 3.通过普通的for删除删除符合条件的多
-
问题内容： 想象一下，我有以下类似的东西修改 如何在不影响任何子元素的情况下从DOM中仅删除（仅文本）“第一”，“第二”和“第三”。 问题答案： 如果要删除所有子文本节点，则可以使用，然后将匹配集减少为仅文本节点： 注意 ：这将保留子元素上所有现有的事件处理程序，使用答案不会做（因为从DOM中删除了这些元素并重新添加了这些元素）。 注2 ：一些链接的问题中的答案显示的代码与我的答案中的代码相似，但