web页面点击右键显示按钮

时间:2024-04-28 15:54:59

首先声明一个对象,然后把声明的对象,赋值一个function,在对象的function当中再return一个function,在返回的这个function中第一步就是要把按钮的class先移除,不然到后面取消右键显示按钮的时候会失效,按钮依然会显示,不会隐藏,第二步就是命名一个拼接上按钮的html代码,因为html代码中有a标签,a标签有href的属性,需要把href属性设置成javascript:;,可以使用jquery中的find方法找到a标签使用attr设置href属性,也可以直接在拼接的a标签里直接设置href属性,最后使用end和appendTo破坏和追加到body上,return拼接设置好的html代码

var kyoPopupMenu = {};
kyoPopupMenu = (function () {
    return {
        sys: function (obj) {
            $('.popup_menu').remove();
            popupMenuApp = $('<div class="popup_menu app-menu"><ul><li οnclick="AddRow()"><a menu="menu1"><i class="zi zi_plus"></i> 增明细</a>' +
                             '</li><li οnclick="delRow()"><a menu="menu2"><i class="zi zi_trashalt"></i> 删明细</a></li></ul></div>')
                .find('a').attr('href', 'javascript:;')
                .end().appendTo('body');
            return popupMenuApp;
        }
    }
})();

取消右键,把按钮的隐藏起来,获取到html代码块,使用jquery的on方法给html绑定contextmenu,回调函数,return false,绑定click事件,在click事件的function里把按钮给隐藏起来

//取消右键
$('html').on('contextmenu', function () { return false; }).click(function () {
    $('.popup_menu').hide();
});

点击右键把按钮显示出来,首先获取一个class,只有在有这个class的元素内点击右键才使用jquery的on方法给获取到的这个class元素绑定contextmenu,回调函数里给上一个形参,申明一个变量赋值为拼接好的html代码的方法,使用坐标轴的方法,计算点击右键的位置,在哪里点击的右键就按钮就显示在什么位置,l赋值为:如果(获取到document元素的宽度减去游览器页面的水平坐标)<拼接html代码的function的宽度就赋值游览器页面的水平坐标减去拼接html代码的function的宽度,否者就直接赋值为游览器页面的水平坐标,t赋值为:如果(获取到document元素的高度减去游览器页面的垂直坐标)<拼接html代码的function的高度就赋值游览器页面的垂直坐标减去拼接html代码的function的高度,否者就直接赋值为游览器页面的垂直坐标。l和t的值是使用三目运算符计算的到的。申明的变量的css显示在左边l和邮编t计算得到的位置

//桌面点击右击
$('.Table').on('contextmenu', function (e) {
    var popupmenu = kyoPopupMenu.sys();
    l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
    t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
    popupmenu.css({ left: l, top: t }).show();
    return false;
});