JQuery Click versus Change

views:

151

answers:

+1 Q:

JQuery Click versus Change

Hi all,
I recently asked a question and posted some code, to which a suggestion was to change my click handlers on a select box to change.

My question now is this: should I always use the Change handler -- or are there situations where Click would still be appropriate (Assume I would like cross-browser compatibility).

EDIT: Here's what I gather: For things like select boxes, Change IS the way to go. For simple things, like images, there is no change, so click is the way to go.

Thanks,
Michael

+1 A:

Click does not work x-broswer, iirc IE does not respond to a select or option click. Change is the only option available.

redsquare 2009-07-27 15:30:03

Thanks, that's all I needed.

Michael 2009-07-27 15:31:58

This is incorrect. IE does not fire the change event when expected. Most browsers fire the change event the moment the value of an element has changed. IE, however, only fires the change event if and only if the value has changed after the element has lost focus. Therefore, for cross-browser coding it is better to use click for drop down lists and keyup for text boxes for truly responsive applications. Otherwise, your users will have to click or tab off the element for your event handling to take place in the best browser known to man.

illvm 2009-07-27 15:33:47

@illvm - that's exactly what I was trying to write; had to deal with this some time ago.

dalbaeb 2009-07-27 15:38:04

@illvm. What rubbish. Option click events cant be bound in ie. Therefore you have select click which tells you when the user is about to select an option. What good is that to anybody?

redsquare 2009-07-27 15:38:13

@illvm - I know of no implementation where a select click event would be used. Can you show me one.

redsquare 2009-07-27 15:39:02

Hmm.. this is interesting debate, so I'll let it go for a little bit longer.

Michael 2009-07-27 15:40:53

What happens if a user uses keyboard arrows for the select. What to do with the 'click'?

redsquare 2009-07-27 15:43:14

Michael, no need to wait. He is wrong!

redsquare 2009-07-27 15:45:29

Also, click does not work in Safari.....more info http://stackoverflow.com/questions/472259/jquery-click-event-not-being-triggered-in-safari

redsquare 2009-07-27 15:46:18

@illvm remove the -1 please

redsquare 2009-07-27 15:47:03

@redsquare, before you spread misinformation please try to at least back it up with some factual information. Here is some useful code that actually works in IE, which hooks a select element's click event, and extracts its value, text, as well as performs some other useful UI tasks.$('saved_widget_select').observe('click', function(){ var that = $('saved_widget_select'); $('save_name').value = that[that.selectedIndex].text; $('saved_widget_id').value = that.value; $('savesavebox').removeClassName('buttonDisabled'); });

illvm 2009-07-27 15:47:52

@redsquare, and I didn't down vote you. -.-

illvm 2009-07-27 15:48:26

But it fires when you click the element to begin with. What is the point in that, and fails to fire in Safari. Again why would I want it

redsquare 2009-07-27 15:48:56

it cannot be considered an x-browser solution. Therefore .change is the only option.

redsquare 2009-07-27 15:50:05

Depending on how responsive you want the app to be and how much code you want to maintain you could hook event conditionally based on the browser. I don't really know of a way to simulate when an event will fire off hand so maybe in non-IE browsers hook change and in IE hook click.

illvm 2009-07-27 15:50:19

why when I can just use .change....It makes no sense to use a non standard event when you have one that works across all browsers. Change works no matter if it is fired after blur or not.

redsquare 2009-07-27 15:51:57

the browser detection you suggest is just way ott for this. Why go through the pain when .change is ready and waiting to be used!

redsquare 2009-07-27 15:53:22

So what about a handler for an image? Should I use Change instead of click then too? (simple case)

Michael 2009-07-27 15:54:05

@redquare Because the change doesn't fire at the proper time on 40-50% of the global user base...

illvm 2009-07-27 15:55:00

You can argue that ie is actually correct in its implementation. The user does not confirm the change until they leave the field. You dont pay for an item in a shop when you take it from the shelf. Your not actually liable until you leave the shop.

redsquare 2009-07-27 16:00:14

Michael, images dont have a change. They have a click and a load. But the load is broken in ie after the first image has loaded. It works if you create a new image in js however.

redsquare 2009-07-27 16:01:12

@redsquare It's not a "buy" event, it's a "change" event. The state of the object has changed, therefore the change event should fire. If I change the option in a select list and check its value immediately afterward its value is different from what it was before. The event should have fired then.

illvm 2009-07-27 16:10:46

So do you want a change event to fire even when scrolling through the list on a keyboard. I have not changed at that point. I am simply scrolling the available options. You will end up with mess of client site code going down the route you suggest. I'm still waiting for one example of a site that uses a select click....

redsquare 2009-07-27 16:13:43

+1 A:

When it comes to form controls, such as text-inputs, select-boxes, check- and radiobuttons, then you should use the onChange-event. When it comes to other stuff, such as link, lists, containers etc, then you should definitely use click, since those items does not support the onChange-event.

PatrikAkerstrand 2009-07-27 15:32:59

ansaurus

tags:

views:

answers:

JQuery Click versus Change

related questions