Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the usage of events in vue to prevent bubbling

不言
Release: 2018-08-02 11:07:26
Original
11835 people have browsed it

This article introduces to you a detailed explanation of how to prevent bubbling of events in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The performance of bubbling

Recently I made a requirement using vue. It is probably the same area. Clicking on different positions has different response functions. There is also a general The response function, well, as shown below:

Detailed explanation of the usage of events in vue to prevent bubbling

Their DOM structure is as follows:

<p>
    <el-col>
        <p></p>
    </el-col>
    <el-col>
    </el-col>
</p>
Copy after login
Copy after login

Bubbling here The performance is that when the user clicks on the event 1 or event 2 area in the picture, event 3 will also be executed. This is because of the time bubbling mechanism, which causes 'handleClick3' to respond when 'handleClick1' is clicked. This is undesirable most of the time, and I don't want it here either.
Look at the classic description of bubbling or

Detailed explanation of the usage of events in vue to prevent bubbling

##The steps 4, 5, 6 and 7 in the picture are bubbling stage.

General solution

If the event bubbles up, then stop the event from bubbling up. In view of the different methods of preventing event bubbling in different browsers, it is recommended to write a handwritten method to prevent event bubbling.

function stopPropagation(event){
    var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
    if(window.event){       //这是IE浏览器
        e.cancelBubble=true;
    }else if(e && e.stopPropagation){     //这是其他浏览器
        e.stopPropagation();//阻止冒泡事件
    }
}

<button> 按钮  </button>   // 使用
Copy after login

Solution in vue

The above compatible method is for event and stop bubbling methods are compatible. But in vue, you need to access the original DOM event in the inline statement processor. This can be passed into the method using the special variable

$event. For example:

<button>
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}
Copy after login
So here we can simplify the above method of stopping bubbling:

function stopPropagation(event) {
    if(event) {
        event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
    }
} 
evnet 为 $event
Copy after login

Standard posture for processing bubbling in vue

Event modifier

Vue.js provides event modifiers for v-on. Modifiers are represented by instruction suffixes starting with a dot. These event modifiers mainly include the following:

  • stop

  • #prevent
  • capture
  • prevent
  • self
  • once
  • passive
  • See, the first 'stop' is what we want!
These modifiers were created to solve these problems. . In other words, we only need to write this in the template to stop bubbling.

<p>
    <el-col>
        <p></p>
    </el-col>
    <el-col>
    </el-col>
</p>
Copy after login
Copy after login

Isn’t it perfect? ​​This eliminates the need to handle the details of dom events in the event response logic. In addition to bubbling, the modifiers provided by vue also have these functions.

<!-- 阻止单击事件继续传播 -->
<a></a>

<!-- 提交事件不再重载页面 -->
Copy after login

...

...


Recommended related articles:

How to convert vue.js images to Base64, upload images and preview

How to define global variables in vue and global method? (Code)

The above is the detailed content of Detailed explanation of the usage of events in vue to prevent bubbling. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template