vue--阻止冒泡、默认行为、键盘事件

Posted 2023-04-05

参考技术A 阻止冒泡：

1、推荐方法：在事件后面加上.stop → @click.stop

2、在函数里加上ev.cancelBubble = true;

默认行为：

1、推荐方法：在事件后面加上.prevent → @click.prevent

2、在函数里加上ev.preventDefault();

键盘事件：

1、回车事件：@keyup.enter；或者@keyup.13

2、上下左右：@keyup.up、@keyup.down、@keyup.left、@keyup.right

原文链接： https://blog.csdn.net/qq_31403519/article/details/77720366

阻止事件冒泡和默认行为，禁止键盘事件

阻止事件冒泡：

function(e){
  e = e || window.event;
  if (e.stopPropagation) e.stopPropagation();
  else e.cancelBubble = true;
}

取消事件默认行为：

function(e) {
  e = e || window.event;
  if(e.preventDefault) e.preventDefault();
  else e.returnValue = false;
}

阻止键盘输入

elem.onkeypress/onkeydown = function(e) {
   return false;
}

在浏览网页的时候，键盘有很多快捷操作，如按空格键滚屏 F5刷新，但是我们有时候需要禁用这些功能怎么办呢？

在浏览器开始调用动作前禁止掉

function initthis()
{
    document.onkeydown=showKey;//不能用onkeyup 否则还是有动作的
}

function showKey(evt)
{
     evt = (evt) ? evt : window.event;
     if(evt.keyCode==32)
     {
          return false;//禁止空格翻页
     }
}

实用例子：土豆 迅雷在线视频的播放页面 你在播放页面时候按空格键是不会滚屏的，但是在写评论的时候可以使用空格键（PS：迅雷这点没做好哦，输入空格还是会暂停视屏，只要你定义个变量，在填写输入框的时候改变变量就可以了，出来改回去）

if(evt.keyCode==32&&doing==0)
{
    return false;//禁止空格翻页
}

编写自定义的JavaScript函数maskingKeyboard()和rightKey();

maskingKeyboard():禁用键盘

rightKey():禁用鼠标右键

<script type="text/javascript">
        //屏蔽键盘的单击事件
        function maskingKeyboard(){
            if(event.keyCode == 8){
                event.keyCode = 0;
                event.returnValue = false;
                alert("当前不允许使用退格键");
            }
            if(event.keyCode == 13){
                event.keyCode = 0;
                event.returnValue = false;
                alert("当前不允许使用回车键");
            }
            }
            function rightKey(){
            if(event.button == 2){
                event.returnValue = false;
                alert("禁止使用鼠标右键");
            }
            }
      </script>