8

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?

kvikshaug
  • 189
  • 11
  • 2
    This sounds like a browser bug. Have you tried `mousedown` or `mouseup` as a workaround? – Rory McCrossan Apr 13 '12 at 08:56
  • 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. – kvikshaug Apr 13 '12 at 09:00
  • Does Opera treat it as an onselect event, but with it being a div there is no onselect event?? – Greg Apr 13 '12 at 10:06
  • 4
    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? – RoToRa Apr 13 '12 at 11:37
  • `mouseup` works http://jsfiddle.net/4yNxs/4/ – The Alpha Apr 13 '12 at 12:40
  • 1
    I would say that's perfect behavior… – feeela Apr 13 '12 at 16:02
  • @RoToRa Your question is the same as mine. Since there are separate implementations, I just want to know which one is supposed to be correct. – kvikshaug Apr 16 '12 at 08:16

2 Answers2

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')

Sogger
  • 15,962
  • 6
  • 43
  • 40
  • 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. – kvikshaug Apr 16 '12 at 08:13
  • 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. – Sogger Apr 16 '12 at 14:51
2

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

hallvors
  • 6,069
  • 1
  • 25
  • 43