由href return false 来看阻止默认事件

很多时候我们都想阻止一个a ?link的href跳转。

1
<a onclick=” return false ;” href=”www. 360 .cn”>click</a>

以上代码可以达到这个效果

有一点要注意

1
2
3
4
5
6
7
function stop(){
  
return false ;
  
}
  
<a onclick=”stop();” href=”www. 360 .cn”>click</a>

这么写是不会阻止默认事件的,stop()反回false, ?onclick却没有返回值 只有事件的返回值是false时 才会阻止默认事件 所以要这么写:

1
<a onclick=” return stop();” href=”www. 360 .cn”>click</a>

这样就会有效果, 那么如果是用绑定事件的方式呢 会怎么样呢

qwrap是用标准的事件绑定方式来做的 可以用它来测试

1
2
3
<a id=”testa” href=”www. 360 .cn”>click</a>
  
W(‘#testa’).click( function (){ return false ;}); // 这是一个标准的绑定事件方法

测试后发现 ie是可以阻止默认事件的 ?标准浏览器 chrome firefox等却没有能阻止 直接发生了跳转

分析后发现因为标准浏览器使用 addEventListener 绑定事件 而该方法是没有返回值的,可参见w3c文档 没有返回值, 返回值当然不会是false所以继续执行href 。

而ie使用attachEvent的方法这个方法是有returnValue的参见?http://msdn.microsoft.com/en-us/library/ie/aa703898(v=vs.85).aspx

所以成功阻止了默认事件,

那么使用addEventListener绑定事件 如何阻止呢 ?

虽然addEventListener 不能有返回值 但是它有一个方法 preventDefault() 专门用来阻止默认事件 ,

1
W(‘#testa’).click( function (e){ e.preventDefault();});

这样就可以成功阻止了.

所以 用addEventListener绑定的事件 必须用preventDefault()来阻止默认事件

但是又有一个现象

1
$(‘#testa’).click( function (){ return false ;});

query 却可以做到, 以上代码运行成功在所有浏览器

这是为什么 ?这并不是jquery可以例外 只是它悄悄的调用了preventDefault() 和 stopPropagation()

jqeury会把事件的响应函数封装在一个dispach的函数里 如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()

所以在jquery中 return false 等价于:

1
2
3
4
5
e.preventDefault()
  
e.stopPropagation()
  
return false ;

这三个

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
不,`return false` 语句不能直接阻止提交行为。`return false` 通常用于阻止事件默认行为,例如阻止表单的提交或链接的跳转。 `uni.showToast` 是一个异步操作,它会在一定时间后自动消失。因此,在调用 `uni.showToast` 后,代码会继续执行后续的逻辑,而不会等待提示框消失。所以,即使在 `uni.showToast` 后加上 `return false`,也无法达到直接阻止提交行为的效果。 如果你希望在显示 `uni.showToast` 后阻止提交行为,可以考虑使用一个标志位来控制提交的逻辑。例如,在显示 `uni.showToast` 时将一个标志位设为 `true`,在 `uni.showToast` 消失后将标志位设为 `false`,然后在提交逻辑中判断该标志位是否为 `true`,如果是则不执行提交逻辑。 以下是一个示例代码: ```vue <template> <view> <textarea v-model="textVal"></textarea> <input v-model="contact" type="text" placeholder="联系方式" /> <button @click="handleFormSubmit">提交</button> </view> </template> <script> export default { data() { return { textVal: '', contact: '', showToast: false }; }, methods: { handleFormSubmit() { const { textVal, contact, showToast } = this; const regPhone = /^1[3578]\d{9}$/; const regEmail = /^[a-z\d_.-]+@[a-z\d_-]+\.[a-z\d_-]+$/i; // 进行合法性验证 if (!textVal.trim()) { uni.showToast({ title: '输入不合法', icon: 'none', mask: true }); this.showToast = true; setTimeout(() => { this.showToast = false; }, 2000); return; } if (!regPhone.test(contact) && !regEmail.test(contact)) { uni.showToast({ title: '联系方式不合法', icon: 'none', mask: true }); this.showToast = true; setTimeout(() => { this.showToast = false; }, 2000); return; } // 其他处理逻辑 if (showToast) { return; // 阻止提交行为 } // 执行提交逻辑 } } }; </script> ``` 在上述代码中,我添加了一个名为 `showToast` 的标志位,默认为 `false`。在显示 `uni.showToast` 时,将该标志位设为 `true`,并在 2 秒后将其设为 `false`。然后,在提交逻辑中判断该标志位是否为 `true`,如果是,则直接返回,从而阻止提交行为。 请注意,以上代码只是一个示例,实际使用时可能需要根据具体需求进行适当的修改和调整。同时,如果你在 HBuilderX 中使用了 uView 或其他 UI 框架,可能还需要根据具体框架的文档进行相应的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值