table.on 鼠标右键点击tr弹出自定义菜单事件
时间: 2023-10-02 08:11:09 浏览: 67
可以使用jQuery实现这个功能,具体代码如下:
```javascript
$(function(){
// 给table中的tr绑定右键菜单事件
$('table tr').bind('contextmenu',function(e){
// 获取鼠标点击位置的坐标
var x = e.pageX;
var y = e.pageY;
// 显示自定义菜单
$('#menu').css({
left: x + 'px',
top: y + 'px'
}).show();
// 阻止默认右键菜单
return false;
});
// 点击页面隐藏菜单
$(document).click(function(){
$('#menu').hide();
});
});
```
其中,`#menu`是自定义菜单的容器,可以在里面添加菜单项。在上面的代码中,当鼠标右键点击`table`中的`tr`时,会显示自定义菜单,并阻止默认的右键菜单弹出;当点击页面其他位置时,自定义菜单会隐藏。
相关问题
layui table.on 鼠标右键点击tr弹出自定义菜单事件
可以使用layui的table模块来实现这个功能,具体代码如下:
```javascript
layui.use(['table', 'layer'], function(){
var table = layui.table;
var layer = layui.layer;
// 监听表格右键菜单事件
table.on('rowRight', function(obj){
// 获取鼠标点击位置的坐标
var x = obj.event.pageX;
var y = obj.event.pageY;
// 显示自定义菜单
layer.open({
type: 1,
title: false,
closeBtn: 0,
offset: [y + 'px', x + 'px'],
content: $('#menu')
});
});
});
```
其中,`#menu`是自定义菜单的容器,可以在里面添加菜单项。在上面的代码中,当鼠标右键点击表格中的某一行时,会显示自定义菜单,并且会将自定义菜单的位置设置为鼠标点击的位置;当点击自定义菜单以外的区域时,自定义菜单会自动隐藏。需要注意的是,如果要使用`rowRight`事件,需要在table的初始化中设置`id`属性。
layui table.on 对应的鼠标点击事件
在 layui 的 table 模块中,table.on() 方法可以用于监听表格中的各种事件,包括单元格的鼠标点击事件。具体实现可以参考以下代码:
```javascript
layui.use('table', function(){
var table = layui.table;
//监听单元格点击事件
table.on('cell(test)', function(obj){
console.log(obj.field); //当前单元格的字段名
console.log(obj.data); //当前行的数据
console.log(obj.event); //当前单元格的事件名
console.log(obj.tr); //当前行的DOM对象
//判断当前单元格的事件名是否为click
if(obj.event === 'click'){
//执行鼠标点击事件的操作
//...
}
});
});
```
在上述代码中,'cell(test)' 表示监听名为 test 的表格的单元格事件。当单元格被点击时,会触发 table.on() 方法中的回调函数,其中 obj.event 属性为当前单元格的事件名,判断是否为 'click' 后即可执行鼠标点击事件的操作。