鼠标右键事件 contextmenu、网页关闭事件 onbeforeunload

忘是亡心i 2022-05-04 00:26 348阅读 0赞

**目录**

oncontextmenu 事件

禁用右击事件

onbeforeunload 事件

--------------------

# oncontextmenu 事件 #

1、oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。友情参考：[http://www.runoob.com/jsref/event-oncontextmenu.html][http_www.runoob.com_jsref_event-oncontextmenu.html]

**2、注意：**所有浏览器都支持 oncontextmenu 事件， [contextmenu][] 元素只有 Firefox 浏览器支持。

<table> 
 <tbody> 
  <tr> 
   <th>是否支持冒泡:</th> 
   <td>Yes</td> 
  </tr> 
  <tr> 
   <th>是否可以取消:</th> 
   <td>Yes</td> 
  </tr> 
  <tr> 
   <th>事件类型:</th> 
   <td>MouseEvent</td> 
  </tr> 
  <tr> 
   <th>支持的 HTML 标签:</th> 
   <td>所有 HTML 元素</td> 
  </tr> 
 </tbody> 
</table>

## 禁用右击事件 ##

**···需求分析···**

1、在 PC 端的网页中右击，或者在移动端的网页上按住不放时，都会出现提示菜单，在某些时候如果不需要这些提示时，则禁用鼠标的右击事件(移动端按住不放如同右击)即可。

2、在 window 中单击右键或在 Mac 中 Ctrl+单击、或者在移动端长按时，都会触发 contextmenu 事件，通过取消其默认动作即可禁用。

3、当然也可以在禁用 contextmenu 事件后，提供自定义菜单。

4、oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

**···实现代码···**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>右键事件</title>
        
        <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                /**阻止浏览器默认右键点击事件*/
                $("div").bind("contextmenu", function () {
                    console.log("用户点击鼠标右键....."+new Date().getTime());
                    return false;
                });
            });
        </script>
    </head>
    <body>
    <div style="border: 1px solid salmon;width: 500px">点击我，右击无效<br>
        <a href="https://www.baidu.com/">前往百度</a><br></div>
    <p style="border: 1px solid firebrick;width: 500px">
        <a href="https://www.baidu.com/">前往百度</a><br>
        财政部、国家税务总局发布的《个人所得税专项附加扣除暂行办法（.........
    </p>
    
    <div style="border: 1px solid violet;width: 500px">
        <h6>这个区域，右击无效</h6><br>
        <a href="https://www.baidu.com/">前往百度</a><br>
        而两个多月后，面对首次实施的专项附加扣除，抵扣标准如何反...
    </div>
    </body>
    </html>

5、同理如果要禁用整个页面的右击事件，则对 html 标签进行绑定即可：

>             /\*\*阻止浏览器默认右键点击事件\*/  
>             $("html").bind("contextmenu", function () \{  
>                 console.log("用户点击鼠标右键....."+new Date().getTime());  
>                 return false;  
>             \});
> 
> \-----------------或者--------------------------
> 
>         /\*\*阻止浏览器默认右键点击事件\*/  
>         $(document).bind("contextmenu", function () \{  
>             console.log("用户点击鼠标右键....." + new Date().getTime());  
>             return false;  
>         \});

# onbeforeunload 事件 #

1、onbeforeunload 事件在即将离开当前页面（刷新页面、关闭页面、关闭浏览器、页面中点击超链接跳转）时触发

2、该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

3、对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"，用户选择离开时，页面会被关闭，否则页面保持原样。

4、注意事项：

>     1、页面必须是在用户活动过后(必须点击了页面上区域，即使是空白区域) 才会触发事件，否则页面打开之后，用户没有在页面上留下痕迹(如鼠标点击、选中文本等任何人为操作)，则即使关闭页面，或者刷新页面等也不会触发事件。
> 
>     2、事件触发后，处理方法中有返回值(return)时，会自动弹框提示，无返回值时，不会弹框提示，返回值的内容无关。

<table> 
 <tbody> 
  <tr> 
   <th style="width:243px;">是否支持冒泡:</th> 
   <td style="width:605px;">No</td> 
  </tr> 
  <tr> 
   <th style="width:243px;">是否可以取消:</th> 
   <td style="width:605px;">Yes</td> 
  </tr> 
  <tr> 
   <th style="width:243px;">事件类型:</th> 
   <td style="width:605px;">Event</td> 
  </tr> 
  <tr> 
   <th style="width:243px;">支持的 HTML 标签:</th> 
   <td style="width:605px;">&nbsp;&lt;body&gt;</td> 
  </tr> 
 </tbody> 
</table>

**使用示例**

1、方式一：在 HTML 中的 body 标签中进行绑定：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网页关闭事件</title>
        <script type="text/javascript">
            /**
             * 页面触发 onbeforeunload 事件时进入
             * 1）在页面被关闭前会进入
             * 2）方法有返回值，才会自动弹框提示，否则不会弹框，但方法内容仍然会执行
             * 3）方法返回的值与页面最终是否被关闭无关，即返回什么值都不会影响
             */
            function pageClose() {
                console.log(new Date() + "：用户准备离开页面...");
                return true;
            }
        </script>
    </head>
    
    <body onbeforeunload="return pageClose()">
    <p><b>触发 onbeforeunload 事件的条件： </b><br>
        1）关闭当前窗口<br>
        2）页面刷新(如按下F5)<br>
        3）点击链接进行页面跳转   <a href="http://baidu.com">百度</a><br>
        4）关闭浏览器<br>
    </p>
    </body>
    </html>

2、window. onbeforeunload：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网页关闭事件</title>
        <script type="text/javascript">
            /**
             * 页面触发 onbeforeunload 事件时进入
             * 1）在页面被关闭前会进入
             * 2）方法有返回值时才会弹框
             * 3）方法返回的值与页面最终是否被关闭无关，即返回什么值都不会影响
             */
            window.onbeforeunload = function (event) {
                console.log("用户准备离开网页：" + new Date());
     
                /**
                 * 因为 js 是阻塞执行的，所以在弹窗提示用户是否离开页面的时候，setTimeout 延迟不会执行
                 * 一直等到用户选择 离开 还是 取消后，才会执行 setTimeout 延迟，延迟 1 秒调用方法
                 * 如果用户选择的是离开，则 1 秒之后，早已经离开，不会影响；如果用户选择的是取消，则 1秒后会执行下面的方法
                 */
                setTimeout(beforeloadResult, 1000);
                event.returnValue = "...";
            };
     
            /**
             * 只要能进入此方法，则表示用户并没有离开页面
             */
            function beforeloadResult() {
                console.log("用户没有离开网页：" + new Date());
            }
        </script>
    </head>
    <body>
    <p><b>触发 onbeforeunload 事件的条件： </b><br>
        1）关闭当前窗口<br>
        2）页面刷新(如按下F5)<br>
        3）点击链接进行页面跳转   <a href="http://baidu.com">百度</a><br>
        4）关闭浏览器<br>
    </p>
    </body>
    </html>

3、window. addEventListener(" beforeunload"：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93YW5nbWFveGlvbmcuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

[http_www.runoob.com_jsref_event-oncontextmenu.html]: http://www.runoob.com/jsref/event-oncontextmenu.html
[contextmenu]: http://www.runoob.com/tags/att-global-contextmenu.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93YW5nbWFveGlvbmcuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220504/11d86d7625bd45e7b6975123a694c8e5.png