VueJS - 防止默认链接点击但也捕获对象

Posted 2023-02-22

【中文标题】VueJS - 防止默认链接点击但也捕获对象

【英文标题】：VueJS - Prevent Default on link click but also capture object

【发布时间】：2015-08-12 17:35:20

【问题描述】：

我正在学习 Vue.JS，但遇到了一些问题。我希望用户能够单击<a href="#"></a> 标签e.preventDefault()，并获取与链接关联的对象。这是我的代码（注意我在 之前有@，因为我使用的是Blade）：

<a href="#"
   class="list-group-item"
   v-repeat="responder: responders"
   v-on="click: showResponder(responder)">
    <div class="media">
        <div class="media-left">
            <img src="" v-attr="src: responder.avatar"  class="media-object"/>
        </div>
        <div class="media-body">
            <h4 class="media-heading">@ responder.first_name  @ responder.last_name </h4>
            <p>
                <strong><i class="fa fa-phone"></i> Phone:</strong> @ responder.phone 
            </p>
        </div>
    </div>
</a>

还有 javascript：

var vm = new Vue(
    el: "#responderContainer",
    data: 
        activeResponder: null,
        responders: []
    ,
    methods: 
        showResponder: function(responder)
        
            // Here is where I wish to prevent the 
            // link from actually firing its default action
            responder.preventDefault();
            this.activeResponder = responder;
        
    
);

这可以抓取responder 对象但会触发链接 - 我需要能够同时获得e.preventDefault() 和获取对象。

谢谢！

【参考方案1】：

或者，在 Vue 1.x 中，您也可以使用 event modifier .prevent：

html：

<a v-on:click.prevent="showResponder(responder)">...</a>

你也可以停止传播：

<a v-on:click.prevent.stop="showResponder(responder)">...</a>

JS：

...
            showResponder: function(responder)
            
                // No need to prevent any more
                this.activeResponder = responder;
            
...

【讨论】：

其实应该是v-on:click.prevent

当没有方法可以调用时如何防止事件传播，例如一个简单的<a href="mailto:[e-mail]"> 链接？

就@MladenDanic 而言，prevent 将阻止默认行为，prevent.stop 将也停止传播。例如：如果您从下拉导航中的锚点单击触发自定义方法，prevent.stop 还将阻止“单击”事件，并保持下拉菜单打开。 prevent 将停止锚链接，但允许事件冒泡以实现“点击”行为

【参考方案2】：

documentation 表明你可以通过 $event 来获取事件对象

http://vuejs.org/guide/events.html

<button v-on="click: submit('hello!', $event)">Submit</button>

/* ... */

  methods: 
    submit: function (msg, e) 
      e.stopPropagation()
    
  

/* ... */

所以你希望 v-on 属性是

v-on="click: showResponder(responder,$event)"

和函数定义为

showResponder: function(responder,e)

【参考方案3】：

使用

@click.stop

如果您想使用 href 而不是自定义点击事件，则在父元素上停止事件冒泡。

<div @click.stop>
  <a href="//google.ca">Google</a>
</div>