Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "Vue in chrome44 occasional click sub-element event can not bubble how to solve", small editor through the actual case to show you the operation process, the operation method is simple and fast, practical, I hope this article "Vue in chrome44 occasional click sub-element event can not bubble how to solve" article can help you solve the problem.

preface

A company project looks like this: a list on the left, click on the article title on the left list, and expand the content corresponding to the article on the right.

The problem now appears in a very small number of customers sometimes the title on the left side, can not open the corresponding content on the right side, the improvement given to people is 'card', click does not move, click does not respond.

A brief introduction to the project environment:

chrome 44(packaged into the user client)

Vue 2.6.10

List layout on the left

Each green box in the list is a vue component called ListItem, and the component of the list is called List.

The code looks something like this.

// List.vue export default { ... methods: { handleClick() { ... Request the logic of the article content } } }// ListItem.vue export default { ... methods: { onClick(e) { console.log ('click ', e.target); this.$ emit('click'); } } }

First of all, don't comment on whether this click is unnecessary. Why not write @click.native="handleClick" directly in Lisit.vue? This is how the original project was written. I simplified some of the logic. The most important thing is that this is not the focus of our discussion.

According to the above code, we can request the article content by clicking in the green box. The actual measurement is also no problem, but since the launch, some users have reported that "the article list point does not move (in fact, onClick -> handleClick is not called", as the beginning of the truth is not believed at the beginning, so simple logic, then vue's regular operation is good, how can there be problems.

But after remote and field confirmation, there is indeed such a problem.

After investigation, it was found that when you click below the red circle in the above picture, it can trigger onClick. In fact, at this time, we just clicked directly on the green box element, which means that we can trigger onClick when we click directly on the div bound to the click event. Our first reaction was whether this child element was using bubble prevention, unfortunately not, and if it was, developers and testers would have detected it earlier, and the problem could not have been detected online.

We suspect that it is the influence of other events except click, such as mousedown and mouseup being prevented from bubbling, whether there is a case of using event capture and preventing bubbling, after elimination, we found that there is a part of it. According to the principle of killing by mistake rather than missing, we have adjusted for these events, but we don't know whether this problem is really solved, because this problem cannot be reproduced locally by our developers and testers in the test environment and production environment. Each time you can only make a little change when you issue the version, the premise of the change is not guaranteed to be good, but it will not be bad, in the face of customer problems we can only ask them to use temporary solutions, but also click on the red circle below that area.

One time we added binding the same event to both the red circle and the red box, which is

(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3013839362871866", enable_page_level_ads: true });// ListItem.vue

Yes, we just need to tie click events to and. We're too hard...

So there are still problems after going online, and you should expect that if those users click to

And still can't trigger onClick, as a programmer, we will not tolerate binding the same event on each div, we gave up such changes, do a dignified programmer, right?

When the user "does not move," when we look at the entity, we find:

1. We remove all events bound to dom in debugging tools, only keep this one event bound to ourselves, users still "click still", still only click on the red circle to trigger onClick.

2. We use document.querySelect ('. yellow.square1').click() on the console in such a way that onClick can be triggered, i.e. the click event can actually bubble up.

Why does clicking with the mouse not work, and by printing out the element we clicked on in the control, we can be 100% sure that we clicked on the element corresponding to document.querySelect ('. yellow.square1').

This discovery completely upended our understanding. What's wrong with Vue, or the browser, or the big shots, they're wrong? Other people are using, there is no problem ah, and this problem can not be reproduced, there is no flow, using the button wizard simulation user operation for a day also did not reproduce. How come everyone thinks you can't even solve such a simple problem? The code has also been reviewed by many front-end colleagues and front-end bosses, and there is nothing wrong with it. However, in production, when someone uses it, there will be "point immobility," which is a fact.

The browser is the foundation of the frontend, and we can only begin to venture a suspicion that Vue is the problem, or that our usage is problematic (how to use it without problems), or that this version of Vue in this version of Chrome44 is problematic in some scenarios.

Search vue event propagation related content, there is a small discovery, before someone did reflect Vue 2.4.2 in the child element event bubble related issues, and vue source code also has related comments.

Although the #6566 issue mentioned above is not exactly the same as our problem, since there is a bug mentioned, we believe that it may be Vue's problem (or we use it incorrectly).

Finally, we decided to abandon the way we wrote click events in Vue and use jQuery instead.

Binding events on the above list, and then according to the corresponding article id to achieve the purpose of opening the corresponding article, this part has no technical content, will not go into detail.

Yes, finally we gave up looking for the cause of this problem, in the face of frequent user failures, coupled with our inability to reproduce the problem, we simply do not know whether it has been changed, and we cannot frequently issue versions in production for users to help us test (testers first refused).

In theory, there should be no problem, but we don't count, it depends on whether the customer still has such a problem, after all, it depends on them to verify.

From entry to abandonment, we finally used Vue completely to what we hated.

About "Vue in chrome44 occasionally click child element event can not bubble how to solve" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.