关于绑定的按键事件组织默认事件失效问题

最新推荐文章于 2023-05-23 14:27:05 发布
最新推荐文章于 2023-05-23 14:27:05 发布
阅读量114 收藏
点赞数 1
分类专栏： 笔记 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31800209/article/details/115765394
版权

这也是我不不久前遇到的问题，绑定输入框事件，因为我要做一个上下键列表移动，但是我只用下面的代码，毫无反应。

e.preventDefault();

找了很多方法，但是一直没找到，后续，一篇文章提醒了我，既然无效，是不是因为我并没有阻止到真的按键的默认事件呢，那篇文章中提到使用绑定原生的按键事件，然后去阻止默认行为，有效，嘛，确实是有效的。
也就是说绑定的对象为document，或者window，然后通过e.target来找到目标对象，做个判断，如果输入框很多的话，可以这样操作，然后就是对应的键值使用上述的代码。就OK了。代码就不贴了

霸虎
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
下面小编就为大家分享一篇vue监听滚动事件 实现某元素吸顶或者固定位置显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效
huangfuyk.的博客
09-19 2029
注： 第三个参数passive默认值为false，但是chrome, Firefox等浏览器为了保证滚动时的性能，在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true。使用addEventListener监听滚动来阻止冒泡（e.preventDefault()），removeEventListener移除监听阻止冒泡（e.preventDefault()），但未生效。
关于e.preventDefault()方法
weixin_43821171的博客
09-22 7675
背景： 同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。 问题： 为什么我在父组件上使用pr
jquery easyui 中e.preventDefault()不生效
weixin_43896145的博客
05-23 274
描述： 在弹框内，input输入框按下enter回车键，希望得到与点击search按钮一样的效果，结果按下enter之后，表单直接提交了。所以需要阻止这种默认行为。执行以上代码，发现并没有生效。
js封装阻止默认事件的函数
qq_37635519的博客
05-18 512
function cancelHandler(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }
阻止默认事件、阻止冒泡，封装方法，兼容IE
前端小白的逆袭
11-05 561
阻止默认事件、阻止冒泡，封装方法，兼容IE
解决vue 绑定对象内点击事件失效问题
10-18
今天小编就为大家分享一篇解决vue 绑定对象内点击事件失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决jquery appaend元素中id绑定事件失效的问题
10-19
下面小编就为大家带来一篇解决jquery appaend元素中id绑定事件失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于动态生成dom绑定事件失效的原因及解决方法
11-28
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： 1. 事件...
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2135
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
键盘的按键事件
weixin_58448088的博客
01-17 3806
1. 键盘的按键事件 keydown 按键按下 keyup 按键抬起 keypreww 按键按下 1.键盘事件默认只有可以获取焦点的标签支持，一般只是 input标签 和 textarea，以及 document document.documentElement document.body 2. 键盘按下事件，如果一直按住键盘按钮，会一直触发事件 3.keydown 和 keypress 的区别 所有的按键都会触发keydown事件 ...
ios10 safari浏览器 在touchmove 里面写e.preventDefault()； 不起作用 的解决方法
p15097962069的博客
06-04 704
ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法
【JS基础】e.preventDefault() 阻止默认操作
热门推荐
Milk~每天分享一点点，技术进步一点点
08-05 3万+
阻止默认操作 默认操作 具体指的是什么呢？看如下实例： 把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。 当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。 在这种情况下，处理方法有： 1.w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false pre
关于JavaScript 中的preventDefault() 方法，无效??!!
iteye_11389的博客
04-03 3426
今天在学习HTML5的拖放过程中遇到了一个关于JavaScript的问题。 preventDefault() 方法 这个方法是为了阻止浏览器对数据或事件的默认处理。 学习拖放的时候用鼠标拖动数据时调用到了这个方法，要把drop事件的默认行为禁掉(默认是以链接形式打开) 在学习代码的时候，我发现拖动图片还是会以链接的形势打开，这说明了 preventDefault()这个方法并...
event.preventDefault()不起作用的坑（含JS复制选取的文本代码）
如果我年少有为不自卑
12-29 9570
原因：JS 放到了DOM之前。调换一下就能阻止了<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Task List</title> </head> <body> <script src="jquery-3.2.1.min.js"></script
e.preventDefault
qq_22912891的博客
05-09 1977
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。 下面是案例： "text/javascript"> $(function(){ $("#sub").bind("click",function(event){
ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法
weixin_30765319的博客
10-28 1648
最近做手机端项目遇到一个问题，就是在ios10系统里面 safari浏览器在touchmove里面写e.preventDefault();不起作用 更种google 还是没有找到解决方法 最后找到了一种解决方法，就是 等着苹果更新 下一版系统！哈哈哈哈哈 如果谁有好的解决方法，欢迎留言········...
火狐浏览器 event.preventDefault();失效的解决办法
c_molione的博客
12-18 2427
调用兼容的阻止默认时间出发的方法  function show （e）{ var event = document.all ? window.event : e; event.preventDefault(); }  
关于ajax请求后js绑定事件失效问题解决方法
最新发布
06-08
当使用Ajax请求后，JS绑定的事件失效的原因可能是因为JS绑定事件的代码在Ajax请求后执行了，但是Ajax请求返回的HTML内容中包含了相同的元素，导致之前绑定的事件被覆盖或失效。 解决方法有两种： 1.使用事件委托 事件委托就是利用事件冒泡原理，将事件绑定到父元素上，通过父元素监听子元素的事件，这样即使子元素动态添加或删除，也不会影响绑定的事件。 示例代码： ```javascript $(document).on('click', '.btn', function() { // 处理事件 }); ``` 2.在Ajax请求成功后重新绑定事件 在Ajax请求成功后，重新绑定事件即可解决问题。 示例代码： ```javascript $.ajax({ url: 'example.com', success: function(data) { // 更新HTML内容 $('#container').html(data); // 重新绑定事件 $('.btn').on('click', function() { // 处理事件 }); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值