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

目录

oncontextmenu 事件

禁用右击事件

onbeforeunload 事件

---

oncontextmenu 事件

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

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

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	MouseEvent
支持的 HTML 标签:	所有 HTML 元素

禁用右击事件

···需求分析···

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

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

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

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

···实现代码···

    
    
    
    
    
    
    


点击我，右击无效

    前往百度


    前往百度

    财政部、国家税务总局发布的《个人所得税专项附加扣除暂行办法（.........



    
这个区域，右击无效

    前往百度

    而两个多月后，面对首次实施的专项附加扣除，抵扣标准如何反...

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)时，会自动弹框提示，无返回值时，不会弹框提示，返回值的内容无关。

是否支持冒泡:	No
是否可以取消:	Yes
事件类型:	Event
支持的 HTML 标签:

使用示例

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

    
    
    



触发 onbeforeunload 事件的条件： 

    1）关闭当前窗口

    2）页面刷新(如按下F5)

    3）点击链接进行页面跳转   百度

    4）关闭浏览器

2、window. onbeforeunload：

    
    
    


触发 onbeforeunload 事件的条件： 

    1）关闭当前窗口

    2）页面刷新(如按下F5)

    3）点击链接进行页面跳转   百度

    4）关闭浏览器

3、window. addEventListener(" beforeunload"：