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;
});

相关文章