Why doesn't Opera throw a click event when you partially mark text?

Question

Given the following HTML:

<div contenteditable="true">Some text</div>

And some JS which detects the click event with JQuery:

$("div").click(function() {
   alert('click!');
});

If you select a portion of the text in the div, the click event will not be thrown by Opera (tested with Opera 11.61 on Linux and 11.62 on Windows). Double-clicking a word to partially mark it does work.

The event is thrown in IE7-9, Firefox, Chrome and Safari. There is a slightly modified JSFiddle here.

Is this expected behavior, a JQuery bug, an Opera bug, or something else?

Cismontane

This sounds like a browser bug. Have you tried mousedown or mouseup as a workaround? – Krumm

Oh, I did now, and that does work as a workaround, thanks! I would still like to find the cause for the original issue though. – Cismontane

Does Opera treat it as an onselect event, but with it being a div there is no onselect event?? – Kero

I wouldn't say it's necessarily a bug. Is it anywhere defined that text selection (which is often a "drag and drop action") must (or even should) trigger a click event? Who says it is "correct" that other browsers do it? – Inhibit

mouseup works jsfiddle.net/4yNxs/4 – Wickner

I would say that's perfect behavior… – Hazlett

@Inhibit Your question is the same as mine. Since there are separate implementations, I just want to know which one is supposed to be correct. – Cismontane

Answer 1

which behaviour is 'correct' is certainly an interesting question. My take on it: I personally think Opera's behaviour makes more sense, as what the user intends to do here is clearly not to "click" something but to "select" something.

On the other hand, I also think Opera should change it to be compatible with the other browsers (unless we can get the other browsers to match Opera). Compatibility is very, very important. So, speaking with my Opera employee hat on: I think we're correct, and I think we should fix that :-p

Profuse

I guess this is as official as it's gonna get :) – Cismontane

Answer 2

Click events are known to have inconsistent behaviour between different elements and different browsers. At the heart of it, a click event is supposed to be fired when a single element records a mousedown followed by a mouseup, see jquery doc.

The best advice I have heard is from here:

Whether or not this is a problem depends on the user interaction you want. But you should generally register your script onmousedown/up, unless you’re completely sure you want the click event and nothing else.

So, in agreement with the comments to your question, the simplest solution is to register to mousedown or mouseup (which one depends on the behaviour you are looking for, the closest behaviour to 'click' would be 'mouseup')

Diptych

While I do agree with what you say, it doesn't really answer the question about Opera's behavior and whether it's the intended behavior, or a bug. Unless you're actually saying it's intentionally undefined, in which case you'll have to correct me. – Cismontane

You're right, I don't have an answer for that. In comparison to a lot of programming APIs, I have found most text and container objects do not have click events, which usually appear on user interactable elements like buttons. So, it's not surprising that it isn't defined on the div container in your example. If you really wanted to know, I would email Opera support or make a post on the Opera forums, they have a really good community over there. – Diptych