This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

It is easy to use the onclick and ondbclick events to bind a node to both the double click and the double click events. Do you know how to listen?

More articles in my Github and personal public account [full zhandao road], welcome to watch [an unknown football dog’s front knowledge point], if there are benefits, do not pay, little hands point a Star

Read this article and you will learn

  • The node is bound to both the Click event and the double-click event
  • [Double click] The event is triggered twice. How can I solve the problem

The basic structure

  • The basic DOM structure is determined first, and the rest of the JS code depends on this structure for processing.
</button> <div class="num"> < {{num}}</div> </div>Copy the code

Bind the click event

  • Use native JS mode for listeningclick
document.getElementById('eventTarget').addEventListener('click', singleClick);
function singleClick() {}
Copy the code

Bind the Double-click event

  • Use native JS methods for listeningdblclick
document.getElementById('eventTarget').addEventListener('click', doubleClick);
function doubleClick() {}
Copy the code

Bind the [click] [double-click] event at the same time

  • In accordance with the normal thinking may be a lot of people will be directly in the DOM node binding two events, but we will find, in practice directly binding the two events, “click” event is normal, but when double-click 】 【 triggered two consecutive times “click” event, and then trigger a double-click event 】, count we can see through the code.

  • So how do you solve this problem? What are the common solutions

Timer mode

By setting the interval of two click events, double click can be realized.

  • First we set up a timer to control the time interval
let clickTimer = null;
Copy the code
  • The binding event is still normal and will not be described here. The [click] event is processed first
Function singleClick() {// Clear Timer clearTimeout(clickTimer); ClickTimer = setTimeout(function() {... Do something console.log(" mouse click "); }, 300); }Copy the code
  • Then the double click event is processed
Function doubleClick() {function doubleClick() {// Clear Timer clearTimeout(clickTimer); . do something }Copy the code

  • The benefits of this kind of treatment is to use the timer, will “click” and “double-click” events, “click” event normal execution, delay the processing of the less effect on the interaction, double-click event 】 although will trigger the execution of “click” event, but will not trigger the internal execution logic, both function is executed but logic will not affect.

Write in the last

If you find this article beneficial to you, please like it and share it with more people who need it!

Welcome to pay attention to [Quanzhandao road] and wechat public account [Quanzhandao Road], get more good articles!
If you need [Baidu] & [Bytedance] & [JINGdong] & [Ape Tutoring], please leave a message, you will enjoy VIP speed push service ~

Past oliver

Deep and shallow copies of the front end

Chrome Developer Tools to Improve development efficiency

Create a personalized Github profile

Implementation of wechat JS API payment

The interviewer asks you<img>What would you say about the element

Special JS floating-point number storage and calculation

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

A detailed explanation of the unpopular HTML tabIndex

A few lines of code teach you to solve the wechat generated posters and two-dimensional code

Principle of Vue3.0 Responsive data: ES6 Proxy

Make the interviewer fall in love with you

How to draw a fine line gracefully

[3 minutes] Front-end performance optimization -HTML, CSS, JS parts

Front-end performance Optimization – Page loading speed optimization

Front-end Performance Optimization – Network transport layer optimization