Click events bound by vue Prevent bubble instances and vue bind bubble instances.

Click events bound by vue Prevent bubble instances and vue bind bubble instances.

When using vue for a project, we often use Click Event binding, but we are tied to a div with other buttons (such as deletion and modification) the button will also load the div click event here, but we don't need it. How to Solve it:

First, let's distinguish between event bubbling and event capture.

(1) bubble events: events are triggered in the order from the most specific event target to the least specific event Target (document Object.

Internet Explorer 6.0: div-> body-> html-> document

Mozilla 1.0: div-> body-> html-> document-> window

(2) event capturing: events are triggered starting from the most inaccurate object (document Object), and then to the most precise (events can also be captured at the window level, but it must be specified by developers ).

(3) DOM event stream: two types of event models are supported at the same time: capture-type events and bubble-type events. However, capture-type events occur first. The two event streams touch all the objects in the DOM, starting from the document Object and ending the document Object.

<Span style = "font-family: SimSun; font-size: 14px;"> <div class = "tableContent" v-for = "(items, index) in dataList "v-on: click =" changeBacks (items) ": class =" {tableContentHover: items. changeBack} "> <ul> <li> <span> <label: class =" {labelChange: items. changeBack} "> √ </label> </span> <label v-html =" items. name "> </label> </li> <label v-html =" items. sex "> </label> </li> <label v-html =" items. tel "> </label> </li> <label v-html =" items. age "v-if =" items. age <= 20 "v-bind: class =" 'black' "> </label> <label v-html =" items. age "v-else-if =" items. age <= 40 "v-bind: class =" 'green' "> </label> <label v-html =" items. age "v-else-if =" items. age <= 60 "v-bind: class =" 'blue' "> </label> <label v-html =" items. age "v-else-if =" items. age <= 80 "v-bind: class =" 'purple '"> </label> <label v-html =" items. age "v-else v-bind: class =" 'red' "> </label> </li> <label v-html =" items. sion "> </label> </li> <button v-on: click. stop = "deleteThis (index)"> Delete </button> </li> </ul> </div> </span>

At this timeButtonClick Event plus. StopTo solve the above problems.

The above click events bound to the vue block the bubble are all the content shared by Alibaba Cloud xiaobian. I hope you can provide a reference and support for the customer's home.