Adding Events to Adding Events in jQuery

By  on  

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.

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!

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.

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.

Thank you to Brandon and Scott for helping me out!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

  • By
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

Discussion

  1. It’s great. It will be a gain of time ! I don’t see how I could do that in an other way.

  2. Your “FAIL” method will work just fine if you return false from both the setup and teardown functions. Also, just a note to readers, you should use “jQuery” rather than a $ in production code, or $ in a closure (my preferred method).

  3. Hey David,

    I decided to respond via a blog post of my own on this topic. As Scott mentioned the Special Event hooks must return false in order to make this work. Hopefully my blog post clears this up.

  4. Thank you Brandon — I commented on your blog.

  5. A very good idea David! :)

    I can only think of one caveat – if you want to take advantage of event delegation then you wouldn’t want the parent (to which you want the events to bubble) to have that CSS property. Using either jQuery’s live() binding or “manual event delegation” might lead to unexpected results.

  6. madhu

    hi,

    i have one doubt

    when i have two links if iclick first link one alert will display, if i click second link another alert will display how it is possible. Can you pls tell me the code if you know.

    thank You

  7. I have found custom jquery events extremely useful!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!