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

阻止事件冒泡:

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>

原文地址:https://www.cnblogs.com/phoebeyue/p/9231309.html

时间: 2024-10-12 21:11:32

阻止事件冒泡和默认行为,禁止键盘事件的相关文章

vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推荐 默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐 键盘: @keydown $event ev.keyCode @

事件冒泡与默认行为

在说事件冒泡之前,我们先说说事件对象(Event) Event 在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素.事件的类型.与特定事件相关的信息) 所有浏览器都支持Event对象,但支持方式不同 IE中的事件对象:window.event /* 封装Event对象 IE:window.event */ function getEvent(event){ return event?event:window.event; } 事件冒泡 什么是

事件冒泡中的两个鼠标事件

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type ="text/css"&

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&

javascript阻止事件冒泡及默认事件方式

//阻止事件冒泡 function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation(); } else{//IE window.event.cancelBubble=true; } } //阻止默认事件 function stopDefault(e) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ){ e.preventDefault(); }els

阻止事件冒泡与默认行为

1.既阻止事件冒泡又阻止事件默认行为: function stopEvent(e){ //兼容 var e = e || window.event if(e.preventDefault){ e.preventDefault(); e.stopPropagation(); }else { e.returnValue = false; e.cancelBubble = true; return false; } } 2.仅阻止事件冒泡: function stopBubble(e){ var e

javascript如何阻止事件冒泡和默认行为

阻止冒泡:  冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo 就是很好的例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&quo

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器 而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元

Vue2学习笔记:事件对象、事件冒泡、默认行为

1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window