如何使用jQuery在触发contextmenu事件时显示信息

1. 添加事件监听器

首先要添加一个事件监听器来监测contextmenu事件。可以使用jQuery中的on()方法来实现：

$(selector).on("contextmenu", function(event){
    //在这里编写处理代码      
});

1. 显示信息

在事件处理函数中，可以使用event对象来获取鼠标右击事件的相关信息，比如鼠标位置等。

$(selector).on("contextmenu", function(event){
    var x = event.pageX;
    var y = event.pageY;
    console.log("鼠标在位置X：" + x + ";Y：" + y);
});

这里使用了console.log()方法来打印信息。

1. 显示自定义内容

除了打印信息，也可以将自定义内容显示在页面上，例如，创建一个像素为200x100的DIV，在鼠标右击事件触发后，将该DIV显示在鼠标所在的位置。

$(selector).on("contextmenu", function(event){
    $("<div/>", {
        "class": "context-menu",
        "css": {
            "left": event.pageX + "px",
            "top": event.pageY + "px",
            "width": "200px",
            "height": "100px",
            "background-color": "lightgrey"
        }
    }).appendTo("body");
});

这段代码使用了jQuery的appendTo()方法将刚创建的DIV添加到了页面的元素中。

1. 阻止默认行为

在某些浏览器中，右击鼠标会弹出浏览器自带的菜单。为了避免这种情况，需要在事件处理函数中使用preventDefault()方法将默认行为停止，只显示自定义内容。

$(selector).on("contextmenu", function(event){
    event.preventDefault();
    $("<div/>", {
        "class": "context-menu",
        "css": {
            "left": event.pageX + "px",
            "top": event.pageY + "px",
            "width": "200px",
            "height": "100px",
            "background-color": "lightgrey"
        }
    }).appendTo("body");
});

1. 完整代码示例一

下面是一个完整的示例代码，当鼠标右击时，在当前位置弹出一个DIV显示“这是一个自定义菜单”的文本信息：

$(function(){
    $(document).on("contextmenu", function(event){
        event.preventDefault();
        $("<div/>", {
            "class": "context-menu",
            "css": {
                "left": event.pageX + "px",
                "top": event.pageY + "px",
                "width": "200px",
                "height": "100px",
                "background-color": "lightgrey"
            },
            "text": "这是一个自定义菜单"
        }).appendTo("body");
    });
});

1. 完整代码示例二

这个示例代码将在鼠标右击事件中弹出一个包含链接的ul列表。

$(function(){
    $(document).on("contextmenu", function(event){
        event.preventDefault();
        var ul = $("<ul/>", {
            "class": "context-menu",
            "css": {
                "left": event.pageX + "px",
                "top": event.pageY + "px",
                "background-color": "lightgrey"
            }
        });
        $("<li/>", {
            "text": "百度",
            "on": {
                "click": function(){
                    window.open("https://www.baidu.com");
                }
            }
        }).appendTo(ul);
        $("<li/>", {
            "text": "谷歌",
            "on": {
                "click": function(){
                    window.open("https://www.google.com");
                }
            }
        }).appendTo(ul);
        $("<li/>", {
            "text": "必应",
            "on": {
                "click": function(){
                    window.open("https://cn.bing.com");
                }
            }
        }).appendTo(ul);
        ul.appendTo("body");
    });
});

以上就是使用jQuery在触发contextmenu事件时显示信息的攻略，希望对你有帮助。