鼠标右键事件

来源：互联网发布：tomcat怎么修改端口编辑：程序博客网时间：2024/05/21 07:06

项目开发中，会遇到鼠标右键事件。而在使用鼠标右键事件时，需要禁止其默认右键事件，简单实例如下：

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、效果图：

阅读全文

0 0