oncontextmenu 事件

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	MouseEvent
支持的 HTML 标签:	所有 HTML 元素

禁用右击事件

···需求分析···

在 PC 端的网页中右击，或者在移动端的网页上按住不放时，如下图所示，都会出现提示菜单，在某些时候如果不需要这些提示时，则禁用鼠标的右击事件(移动端按住不放如同右击)即可。

contextmenu 鼠标右键事件

在 window 中单击右键或在 Mac 中 Ctrl+单击、或者在移动端长按时，都会触发 contextmenu 事件，通过取消其默认动作即可禁用。
当然也可以在禁用 contextmenu 事件后，提供自定义菜单。
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

···实现代码···

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- meta使用viewport以确保页面可*缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>右键事件</title>
    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /**阻止浏览器默认右键点击事件*/
            $("div").bind("contextmenu", function () {
                console.log("用户点击鼠标右键....."+new Date().getTime());
                return false;
            });
        });
    </script>
</head>
<body>
<div style="border: 1px solid salmon;width: 500px">点击我，右击无效<br>
    <a href="https://www.baidu.com/">前往百度</a><br></div>
<p style="border: 1px solid firebrick;width: 500px">
    <a href="https://www.baidu.com/">前往百度</a><br>
    财政部、国家税务总局发布的《个人所得税专项附加扣除暂行办法（.........
</p>

<div style="border: 1px solid violet;width: 500px">
    <h6>这个区域，右击无效</h6><br>
    <a href="https://www.baidu.com/">前往百度</a><br>
    而两个多月后，面对首次实施的专项附加扣除，抵扣标准如何反...
</div>
</body>
</html>

同理如果要禁用整个页面的右击事件，则对 html 标签进行绑定即可：

/**阻止浏览器默认右键点击事件*/
$("html").bind("contextmenu", function () {
console.log("用户点击鼠标右键....."+new Date().getTime());
return false;
});

-----------------或者--------------------------

/**阻止浏览器默认右键点击事件*/
$(document).bind("contextmenu", function () {
console.log("用户点击鼠标右键....." + new Date().getTime());
return false;
});

contextmenu 鼠标右键事件

oncontextmenu 事件

禁用右击事件

相关推荐