Click on a box to display the style in vue. Now you want to click on the space outside the box and let the style be hidden. What event should be added?

Click on a box to display the style in

vue. Now click on the space outside the box and let the style be hidden. What event should be added?

Mar.19,2021

idea:
add a click event to the document, let the style hide when you click on the document;
add a click event to the box, let the style display when you click on the box, and prevent the event from bubbling, so that the click event of the document will not be executed.

Code:

document.addEventListener('click', function (e) {
  // 
}, false)
// @click.stop@click.stop

get the location of the mouse click, determine the location of the mouse click, whether it is in the box area, display the style in the box area, and hide it if it is not in the box area


reference link: https://blog.csdn.net/qq_4020.

Menu