vue click event failure check method

First use the console to detect

Check to see if the actual size of your element control is not stretched at all.
Add styles to stretch the interface.

  height: 100%;
  width: 100%;

Check margins and the like

Problems with the control itself

design issues

For example, the vue control vue-seamless-scroll achieves the list scrolling effect. However, when doing automatic scrolling of the page, if you use v-for to add a click event to each item, you will find that the reason why the click event fails when scrolling to the second time is vue-
seamless- scroll copies a copy of the DOM by itself, causing the click event to disappear when the copied DOM appears.
First, adding a click function to each item is very, very, very resource-consuming. It is not recommended to develop a solution like this. You can use delegated events to see the details
. This blogger
pays attention to adding all the controls that want to be effective when using delegated events to bind.
Insert image description here

bubbling events

The click event is blocked by the default event. Use .native to solve the problem of subcomponents blocking click events.

Summarize

  1. Either the scope is set incorrectly, or the control is not supported.
  2. Either use a third-party component to block events
  3. Furthermore, for design issues, check Baidu to see if the components you use have similar problems.

Guess you like

Origin blog.csdn.net/TY_GYY/article/details/125460812