jquery 添加事件
Earlier this week I posted a usability tip about using CSS and MooTools' custom event functionality to automatically add the "pointer" cursor when an element gets a "click" event attached to it. I received numerous requests for a jQuery version and I think I've figured out how to replicate the functionality.
本周早些时候，我发布了一个可用性提示，内容涉及使用CSS和MooTools的自定义事件功能来在元素具有附加的“ click”事件时自动添加“ pointer”光标 。 我收到了许多有关jQuery版本的请求，我想我已经弄清楚了如何复制该功能。
jQuery JavaScript失败 (The jQuery JavaScript FAIL)
/* create custom event */
jQuery.event.special.click = {
setup: function() {
$(this).css('cursor','pointer');
},
teardown: function(namespaces) {
$(this).css('cursor','');
}
};
/* usage; nothing different than usual*/
$(document).ready(function() {
$('#click-me').click(function() {
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).css('background',col);
});
});
I use the special event object to add a custom event named click. When the event is added, the setup method changes the element's cursor to pointer. If we were to remove that event, the pointer cursor would be removed. The problem with the above code is that it appears to override the default click event and when you actually click on the element, nothing happens. Damn!
我使用特殊事件对象添加名为click的自定义事件。 添加事件后，设置方法会将元素的光标更改为指针 。 如果我们要删除该事件，则指针光标将被删除。 上面的代码的问题在于，它似乎覆盖了默认的click事件，并且当您实际单击该元素时，什么也没有发生。 该死的！
jQuery JavaScript“成功” (The jQuery JavaScript "Success")
/* listen for hover/click */
$(document).ready(function() {
/* attempt fix */
$('*').each(function() {
$(this).mouseover(function() {
if(jQuery.data(this,'events').click) {
$(this).css('cursor','pointer');
}
});
});
/* usage? */
$('#click-me').click(function() {
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#click-me').css('background',col);
});
});
The only way I could get this to work without modifying the jQuery core is to place a mouseenter event on each element in the DOM that checked to see if a click event was present for the given element. If so, show the cursor pointer. This is an ugly method to achieve the goal but the only one I found. If an element were to be added to the DOM dynamically, the above wouldn't work.
我无需修改jQuery核心就能使它起作用的唯一方法是，在DOM中的每个元素上放置一个mouseenter事件，以检查给定元素是否存在click事件。 如果是这样，请显示光标指针。 这是实现目标的丑陋方法，但我找到的唯一方法。 如果要动态地将元素添加到DOM，则上述操作将无效。
更新：jQuery JavaScript解决方案 (UPDATE: The jQuery JavaScript Solution)
jQuery.event.special.click = {
setup: function() {
$(this).css('cursor','pointer');
return false;
},
teardown: fuction() {
$(this).css('cursor','');
return false;
}
};
Brandon Aaron and Scott Kyle blessed us with the solution; it looks like I was very close. Adding return false; would have done it.
布兰登·亚伦 ( Brandon Aaron)和斯科特·凯尔 ( Scott Kyle)为我们提供了解决方案。 看起来我离我很近。 添加return false; 会做到的。
Thank you to Brandon and Scott for helping me out!
感谢Brandon和Scott帮助我！
jquery 添加事件