oncontextmenu 是鼠标按下右键后,在右键菜单弹出前触发
oncopy 当复制内容时触发
请看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d" style="width:200px;height:200px;border:1px solid red">
父元素
<div id="inner" style="width:100px;height:100px;border:1px solid gray">
子元素
</div>
</div>
<script type="text/javascript">
var d = document.getElementById('d');//获取父元素
//当点击右键时
d.oncontextmenu = function(){
console.log('oncontextmenu触发了');
// return false;//不让菜单出来
}
// 当复制内容时
d.oncopy = function(){
console.log('oncopy触发了');
return false;
}
</script>
</body>
</html>
以上,我们给父元素绑定了oncontextmenu和oncopy事件。
当鼠标在父元素或子元素内右击时会触发oncontextmenu事件,当我们在oncontextmenu事件函数内使用return false;时可以阻止右键菜单的弹出。
当鼠标在父元素或子元素内使用鼠标右键方式复制或ctrl+c方式复制时都会触发oncopy事件。
大家可以自行测试一下,以加深印象。
|