jQuery 自定义鼠标右键菜单

最新推荐文章于 2021-06-17 11:42:45 发布

yuanmei1986

最新推荐文章于 2021-06-17 11:42:45 发布

阅读量2.9k

点赞数

分类专栏： jQuery 文章标签： jquery 鼠标事件

本文链接：https://blog.csdn.net/yuanmei1986/article/details/50457586

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>自定义右键菜单</title>
  <!-- 1. 引入jQuery文件 -->
  <script src="jquery-1.11.3.js"></script>
  <!-- 2. 引入jQuery UI的JS文件 -->
  <script src="jquery-ui.js"></script>
  <!-- 3. 引入jQuery UI的CSS文件 -->
  <link rel="stylesheet" href="jquery-ui.css">
 </head>
 <body>
    <ul style="width:100px;display:none;position:absolute;" id="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3
            <ul>
                <li>Item 3-1</li>
                <li>Item 3-2</li>
                <li>Item 3-3</li>
                <li>Item 3-4</li>
                <li>Item 3-5</li>
            </ul>
        </li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

  <script>
    // 1. 如何禁用默认鼠标右键菜单
    $(document).contextmenu(function(){
        return false;
    });
    // 2. 绑定鼠标右键的事件
        $(document).mousedown(function(event){
        //当点击鼠标右键，显示菜单
        if(event.button == 2){
            // 显示自定义菜单
            $("#menu").css({
                //定义菜单显示位置为事件发生的X坐标和Y坐标
                top : event.pageY,
                left : event.pageX
            }).slideDown(100);
            //如果点击鼠标左键，隐藏菜单
        }else if(event.button == 0){
            $("#menu").slideUp(100);
        }
    });
    $( "#menu" ).menu();
  </script>
 </body>
</html>

yuanmei1986

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery 自定义鼠标右键菜单

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Descr
复制链接

扫一扫

专栏目录