jquery 添加事件_将事件添加到jQuery中的添加事件

左手的ㄟ右手 2023-02-21 15:29 7阅读 0赞

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][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”光标][using CSS and MooTools_ custom event functionality to automatically add the _pointer_ cursor when an element gets a _click_ event attached to it] 。 我收到了许多有关jQuery版本的请求，我想我已经弄清楚了如何复制该功能。

[View Demo][] [观看演示][View Demo]

## 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] ( [Brandon Aaron)][Brandon Aaron]和[斯科特·凯尔][Scott Kyle] ( [Scott Kyle)为][Scott Kyle]我们提供了解决方案。 看起来我离我很近。 添加return false; 会做到的。

[View Demo][] [观看演示][View Demo]

Thank you to Brandon and Scott for helping me out!

感谢Brandon和Scott帮助我！

> 翻译自: [https://davidwalsh.name/add-events-jquery][https_davidwalsh.name_add-events-jquery]

jquery 添加事件

[using CSS and MooTools_ custom event functionality to automatically add the _pointer_ cursor when an element gets a _click_ event attached to it]: https://davidwalsh.name/mootools-add-event
[View Demo]: https://davidwalsh.name/demo/jquery-custom-event-cursor.php
[Brandon Aaron]: http://brandonaaron.net/blog/2009/06/17/automating-with-special-events
[Scott Kyle]: http://appden.com/
[https_davidwalsh.name_add-events-jquery]: https://davidwalsh.name/add-events-jquery