Detailed explanation of the coexistence of onClick event and onDblClick event

This time I will bring you a detailed explanation of the coexistence of the onClick event and the onDblClick event. What are the precautions for the coexistence of the onClick event and the onDblClick event? The following is a practical case, let's take a look.

The example in this article describes the JS solution to the coexistence of onClick events and onDblClick events on the same DOM element. Share it with everyone for your reference. The details are as follows:

In a recent project, I encountered the need to add two events, onclick and ondblclick, on the same DOM element. If you add processing in the normal way, it turns out that only onclick will be executed. Ondblclick will not be executed; at this time, we need to slightly process the processing functions of the two events to achieve the coexistence of the two events. The code is as follows:

<script type="text/javascript">
 var clickTimer = null;
 function _click(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   clickTimer = window.setTimeout(function(){
      // your click process code here
      alert("你单击了我");
   }, 300);
 }
  function _dblclick(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   // your click process code here
   alert("你双击了我");
 }
</script>
<button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>

The processing idea is: use The timer delays the execution of the onclick event, so that the click event triggered midway will be canceled during the double-click process.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS event delegation in the project

Operation WeChat applet login authentication from scratch right

The above is the detailed content of Detailed explanation of the coexistence of onClick event and onDblClick event. For more information, please follow other related articles on the PHP Chinese website!