使用<a>标签绑定事件

使用<a>标签绑定事件
转自:http://www.360doc.com/content/14/0220/13/13147830_354185803.shtml

我们常用的在a标签中有点击事件:
1、 a href=”javascript:js_method();”

这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2、 a href=”javascript:void(0);” οnclick=”js_method()”

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3、 a href=”javascript:;” οnclick=”js_method()”

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4、 a href=”#” οnclick=”js_method()”

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5、 a href=”#” οnclick=”js_method();return false;”

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。

综合上述,在a中调用js函数最适当的方法推荐使用:
a href=”javascript:void(0);” οnclick=”js_method()”
a href=”javascript:;” οnclick=”js_method()”
a href=”#” οnclick=”js_method();return false;”

<think>好的,我现在需要解决用户在Vue中阻止点击<a>标签时触发父级<div>点击事件的问题。首先,根据用户提供的引用内容,特别是引用[1]和[2],他们提到了使用.stop修饰符来阻止事件冒泡。 我记得在Vue中,事件修饰符非常有用。.stop的作用是调用event.stopPropagation(),这样事件就不会继续向上传播到父元素。用户的问题正好是点击子元素<a>时触发了父级<div>的事件,所以应该在<a>标签的点击事件上添加.stop修饰符。 不过需要确认用户的结构是否正确。比如,是否<a>标签确实嵌套在<div>内部,并且两者都有点击事件。例如,用户可能有类似这样的结构: <div @click="handleDivClick"> <a @click="handleAClick">链接</a> </div> 这时候点击<a>会触发handleAClick,然后事件冒泡到div,触发handleDivClick。要阻止这种情况,只需在<a>的@click后加上.stop: <a @click.stop="handleAClick">链接</a> 这样,点击<a>时,事件就不会冒泡到父级div了。引用[1]中的例子也是类似的,子元素添加了.stop,阻止了父元素的点击事件。 另外,引用[3]提到native修饰符,但那是用于在组件上监听原生事件,可能不适用于这里的情况。用户的问题是关于普通元素,所以应该不需要使用.native。 还需要注意,如果用户使用的是Vue组件而不是原生标签,可能需要确认是否正确绑定事件。但根据用户的问题,他们提到的是<a>标签,所以应该是原生元素,使用.stop即可。 总结解决方法:在<a>标签的点击事件使用@click.stop,阻止事件冒泡到父级div。</think>在Vue中阻止`<a>`标签点击触发父级`<div>`点击事件,可以通过**事件修饰符.stop**实现。具体操作如下: 1. **在子元素`<a>`标签的点击事件中添加`.stop`修饰符** 这会阻止事件冒泡到父级元素,确保点击`<a>`时不会触发父级`<div>`的事件。 代码示例: ```html <div @click="handleDivClick"> <a href="#" @click.stop="handleAClick">点击链接(不触发父级事件)</a> </div> ``` 2. **原理说明** Vue的事件系统默认遵循DOM事件冒泡机制[^3]。添加`.stop`修饰符相当于调用`event.stopPropagation()`,中断事件传播链,从而避免父级事件被触发[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值