javascript - prevent child from @click vue.js - Stack Overflow

admin管理员组

文章数量:1289901

I have this situation:

<a href="#" 
  class="btn btn-xs btn-bricky tooltips" 
  :data-id="row.id" 
  data-placement="top"
  data-original-title="Remove" 
  @click.self.stop="removeRow($event)">
       <i class="fa fa-times fa fa-white"></i>
</a>

Now, when I click on link it's ok, but if I click on <i> (which is inside of <a>) nothing happens (because of @click.self.stop).

What I would like to achieve is to trigger same method, in this case removeRow(), no matter if I click <a> or <i> is clicked. I need to get data-id attribute form ahref.

I have this situation:

<a href="#" 
  class="btn btn-xs btn-bricky tooltips" 
  :data-id="row.id" 
  data-placement="top"
  data-original-title="Remove" 
  @click.self.stop="removeRow($event)">
       <i class="fa fa-times fa fa-white"></i>
</a>

Now, when I click on link it's ok, but if I click on <i> (which is inside of <a>) nothing happens (because of @click.self.stop).

What I would like to achieve is to trigger same method, in this case removeRow(), no matter if I click <a> or <i> is clicked. I need to get data-id attribute form ahref.

• javascript
• vue.js

Share Improve this question Follow edited Feb 27, 2018 at 15:54 acdcjunior 136k3737 gold badges338338 silver badges310310 bronze badges asked Feb 27, 2018 at 15:23 Branko DragovicBranko Dragovic 19511 gold badge44 silver badges1717 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

What I would like to achieve is to trigger same method, in this case removeRaw, no matter if I click <a> or <i> is clicked.

From what you say, you actually have to just remove the .self modifier.

Per docs (Event Handling/Event Modifiers/.self):

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

See changed code below.

new Vue({
  el: '#app',
  data: {
    rows: [{id: 1, name: "row1"}, {id: 2, name: "row2"}]
  },
  methods: {
    removeRow($event) {
      console.log($event.currentTarget.dataset.id)
    }
  }
})

<script src="https://unpkg./[email protected]/dist/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="app">

  <div v-for="row in rows">
     <a href="#" 
       class="btn btn-xs btn-bricky tooltips" 
       :data-id="row.id" 
       data-placement="top"
       data-original-title="Remove" 
       @click.stop="removeRow($event)">
         <i class="fa fa-times fa fa-white"></i> {{ row.name }}
     </a>
  </div>
 
</div>

The only modified bit in the template was @click.self.stop="removeRow($event)" to @click.stop="removeRow($event)".

In the JS part, I created a rows just to test, and added console.log($event.currentTarget.dataset.id) to show how to get the id.

Then you don't need to use stop propagation or call function on self:

<a href="#" 
class="btn btn-xs btn-bricky tooltips" 
:data-id="row.id" 
data-placement="top"
data-original-title="Remove" 
@click.prevent="removeRow($event)">
       <i class="fa fa-times fa fa-white"></i>
</a>

prevent is used to prevent the default link action.

You can use currentTarget instead of target to identify the attached element and get the href value from there.

$event.currentTarget.href

---

Alternatively, why not just to set the value in params:

@click.prevent="removeRow('your-value')"

In your method:

removeRow(myvalue) {
  // do whatever you want to do with myvalue
}

The solution is quite easy. use @click.stop

@click.stop(openUser(user))

You can use the following sample to get it to work. Run the code and click on the three texts, but you will only get the data-id value of the child and parent divs

new Vue({
 el: '#app',
 methods: {
  init($event){
   let el = $event.target.nodeName
   var id = null; 
   
   if(el == 'A'){
    id = $event.target.dataset.id
   }
   
   if(el == 'I'){
   	id = $event.target.parentElement.dataset.id
   }
  
   console.log( ' id', id)
  }
 }
})

<script src="https://unpkg./[email protected]/dist/vue.js"></script>
<div id="app">
  
<a href="#" @click='init' data-id='42'> Inside A <br/>
  <i>Inside I</i>
</a>
  
</div>

本文标签： javascriptprevent child from click vuejsStack Overflow