项目开发中,会遇到鼠标右键事件。而在使用鼠标右键事件时,需要禁止其默认右键事件,简单实例如下:
1、HTML代码:
<div id="wrap">
<p>节目</p>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
2、css代码:
html,body{margin: 0;padding: 0;}
#wrap{position: relative;width: 300px;margin: 100px auto 0;}
#wrap p{cursor: pointer;width: 100%;text-align: center;}
#wrap ul{border:1px solid #ccc;box-sizing:border-box;position: absolute;left: 0;top: 20px;display: none;list-style: none;padding: 0;width: 100%;}
#wrap ul li{cursor:pointer;height: 20px;line-height: 20px;text-align: center;}
#wrap ul li:nth-of-type(1){border-bottom: 1px dashed #ccc;}
#wrap ul li:hover{background-color: #ccebf8;}
3、js(jQuery)代码:
$(function ($) {
$('#wrap p').on("contextmenu", function () {
return false;
});
$('#wrap p').mousedown(function (event) {
var event = event || window.event;
console.log(event.which);
if (3 == event.which) {
$('#wrap>ul').show();
}
});
$('#wrap ul>li').click(function () {
var text = $(this).text();
$('#wrap p').text(text);
$('#wrap ul').hide();
});
});
4、效果图: