div onclick only in viewable area

Question

here is the scenario:

<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000" onclick="alert(0)">
    <textarea style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #FF0000" ondblclick="alert(1)"></textarea>
</div>

The main problem is that the textarea's ondblclick event does not get triggered.

What happens is that if i try to doubleclick in the textarea the div onclick is triggered. I want the onclick of the div to happen ONLY if i click in the area of the div that is not covered by the textarea. How can I achieve that ?

Thanks in advance!

Answer 1

Try reading up on event delegation and adding handlers unobtrusively

Basically you can assign one click or dblclick handler to the div element. Within that handler you can determine the originating element and take the necessary action(s). The links should provide you with further information about that.

a basic example (using jquery and one handler function) 一个基本示例 （使用jquery和一个处理程序函数）

Answer 2

Just cancel the event. For traditional event attaching, you have to put return false; in the end, but I'd advice to use some more modern ways to attach event listeners (namely, addEventListener or attachEvent for IE8 and older).

Answer 3

You can use timers to detect intent.

Set a timer when click occurs which will get executed if no subsequent clicks occur.

On double-click clear the timer and execute your default double-click functionality.

As below,

var dblClickIntentTimer = null;

elem.click(function(){
   dblClickIntentTimer = setTimeout(function() {
      //Wait for 100 ms and then execute 'click' functionality here
   }, 100);
});


elem.dblclick(function(){
   clearTimeout(dblClickIntentTimer);

   //Do double-click functionality here  

});