js去掉浏览器右键点击默认事件

1、阻止整个页面所有的右击事件

document.oncontextmenu = function(){
  return false;
}

2、特定的区域/元素

document.getElementById("test").oncontextmenu = function(e){
  return false;
}

3、去掉以后给需要的区块加特定的事件

js:

document.getElementById("test").onmousedown = function(e){
  if(e.button ==2){
    alert("你点了右键");
  }else if(e.button ==0){
    alert("你点了左键");
  }else if(e.button ==1){
    alert("你点了滚轮");
  }
}

jq:

$("#test").mousedown(function(e){
  //doing
});

4、通过jq bind绑定和触发

$('').bind("contextmenu",function (e){

   //doning

   return false;

});

$('').trigger('contextmenu');

Vue-阻止事件冒泡-开启右键-键盘类事件

1、阻止事件冒泡

  当点击按钮时,会触发button的click也会触发父级的方法

<div id="box">
<div @click="parentShow">
   <button type="button" @click="show()">按钮</button>
</div>
</div>

解决方法:

  第一种方法,传入一个event对象,然后对象里有cancelBubble方法,设置为true

<div id="box">
<div @click="parentShow">
<button type="button" @click="show($event)">按钮</button>
</div>
</div>
methods: {
show: function(ev){
alert(1);
ev.cancelBubble = true;
},
parentShow: function(){
alert(2);
}
}

  第二种方法是vue封装好的,直接在click的后面加上.stop,建议使用

<div id="box">
<div @click="parentShow">
<button type="button" @click.stop="show()">按钮</button>
</div>
</div>

2、阻止左键,开启右键行为

  按钮的右键行为,vue事件。这里的prevent是关闭默认行为,相当于 传个$event 然后 event.preventDefault();

<button type="button" @contextmenu.prevent="show1()">按钮</button>

3、键盘类事件

  keyup、keydown是监听键盘按下,弹起事件,后面的.enter是指定键盘的按键,比如常见的:up、down、left、right、enter、tab等

<input type="text" @keyup.enter="show2()" />

  也可以通过$event的keyCode来获取键盘的值。比如:

<input type="text" @keydown="show2($event)" />
show2: function(ev){
console.log(ev.keyCode);
}

参考文章:https://www.cnblogs.com/zycbloger/p/5643122.html

js去掉浏览器右键点击默认事件(+vue项目开启右键行为)的更多相关文章

  1. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  2. c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 .

    // c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 分类: c# 2013-02-06 15:18 3008人阅读 评论(0) 收藏 举报 可以实现 ...

  3. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  4. js屏蔽浏览器(IE和FireFox)的刷新和右键等功能

    //一.js屏蔽浏览器(IE和FireFox)的刷新功能 document.onkeydown=function() { if ((window.event.keyCode==116)|| //屏蔽 ...

  5. js 去掉浏览器右击默认事件

    1.整个页面所有的右击事件 document.oncontextmenu = function(){ return false; } 2.特定的区域 document.getElementById(& ...

  6. JS判断浏览器是否支持触屏事件

    var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...

  7. 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  8. 阻止默认事件preventDefault与returnValue

    通过阻止默认事件,禁止鼠标右键的使用 document.getElementById('dd').oncontextmenu = function(ev){ event = ev || window. ...

  9. Python3 tkinter基础 Frame event.x 输出鼠标左右键点击的位置

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

随机推荐

  1. bzoj5392 [Lydsy1806月赛]路径统计

    传送门 分析 我们设sum[x]为小于等于x的点现在有多少联通 于是一个序列合法当且只当sum[R]-sum[L-1]=len且所有点度数不大于2 我们知道如果对于序列[L,R]满足条件则[L+1,R ...

  2. Entity Framework 6.0 Tutorials(10):Index Attribute

    Index Attribute: Entity Framework 6 provides Index attribute to create Index on a particular column ...

  3. docker入门及安装

    Docker简介 Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).ba ...

  4. css总结10:父标签没有定义高度,盒子异常移动

    1 问题:在父标签没有定义高度的情况下,嵌套的盒子浮动后,父标签下面的元素发生位置错误. 2 解决方法: 2.1(大厂网页常用方法) 添加额外元素: 即:父标签下添加一个元素(.clearfix),去 ...

  5. Java 5新特性 for each 和Iterator的选择

    在使用一边做迭代操作一边做删除数组元素操作是应该使用Iterator package for_each_And_Iterator; public class Commodity { private S ...

  6. .Net 数据库(SqlServer2008)的备份、还原

    //备份代码private void Backup() { SqlConnection sqlConn = new SqlConnection(strConn); strFileName = &quo ...

  7. POJ2442 Sequence(堆的骚操作)

    Description Given m sequences, each contains n non-negative integer. Now we may select one number fr ...

  8. Tomcat与Web.xml配置

    1.编码配置 <Connector acceptCount=”100″ connectionTimeout=”20000″ disableUploadTimeout=”true” enableL ...

  9. C#常见编译报错

    mCaster.PlayAnim(ANIMID.ASTD); No overload for method 'PlayAnim' takes '1' arguments PlayAnim()内有两个参 ...

  10. 【SQL】- 基础知识梳理(八) - 事务与锁

    事务的概念 事务:若干条T-SQL指令组成的一个操作数据库的最小执行单元,这个整体要么全部成功,要么全部失败.(并发控制) 事务的四个属性:原子性.一致性.隔离性.持久性.称为事务的ACID特性. 原 ...