龙空技术网

oncontextmenu右键点击事件

木雷双雄 134

前言:

现在你们对“js添加右键点击事件怎么设置”大约比较着重,同学们都想要了解一些“js添加右键点击事件怎么设置”的相关知识。那么小编同时在网上网罗了一些有关“js添加右键点击事件怎么设置””的相关文章,希望各位老铁们能喜欢,小伙伴们一起来了解一下吧!

1、取消鼠标右键

body中用oncontextmenu='return false';

在JS中用window.document.oncontextmenu = function(){ return false;}

2、属性

clientX:设置或返回事件发生时鼠标指针在当前窗口中的 X 坐标(不考虑窗口边框与滚动条)。

clientY:设置或返回事件发生时鼠标指针在当前窗口中的 Y 坐标(不考虑窗口边框与滚动条)。

offsetX:设置或返回事件发生时鼠标指针相对于激发事件对象的 X 坐标。

offsetY:设置或返回事件发生时鼠标指针相对于激发事件对象的 Y 坐标。

screenX:设置或返回事件发生时鼠标指针相对于屏幕的 X 坐标。

screenY:设置或返回事件发生时鼠标指针相对于屏幕的 Y 坐标。

x:设置或返回事件发生时相对于父元素的相对定位鼠标指针位置的 X 坐标值。

y:设置或返回事件发生时相对于父元素的相对定位鼠标指针位置的 Y 坐标值。

altKey:设置或返回一个值,表明事件发生时 ALT 键的状态。

ctrlKey:设置或返回一个值,表明事件发生时 CTRL 键的状态。

shiftKey:设置或返回事件发生时 SHIFT 键的状态。

type:设置或返回事件名称。

3、右键点击显示自定义内容

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>oncontextmenu右键点击事件</title>

<script type="text/javascript" src=""></script>

<script>

$(document).ready(function(e) {

var con = document.getElementById("right");

document.oncontextmenu = function(event) {

var event = event || window.event;

var style = con.style;

$(con).fadeIn(300);

style.top = event.clientY + "px";

style.left = event.clientX + "px";

return false

};

document.onclick = function() {

$(con).fadeOut(100);

}

});

</script>

</head>

<body>

<span id="right" style="display:none; position:fixed; border:#999 solid 1px;">右键显示我哦</span>

</body>

</html>

标签: #js添加右键点击事件怎么设置