如何触发jquery.nestable树节点的click事件
展开全部
从源码来看, 绑定在树节点的click事件, 会因为先触发内部的onmousedown, 调用dragStart方法而导致原DOM节点被移除, 继而导致click事件无法触发;
这里在不修改源码的前提下提供两个方案:
1. click事件换成mousedown事件
2. 通过对源码onStartEvent方法的分析, 在树节点上放一个button将树节点的"拖拽开始"和"点击事件"分离(注意这里的button需要不同于nestable自己的折叠按钮的样式设定)
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="sleest">
<meta name="description" content="nestable example for item click, 2017/08/23">
<title>Document</title>
<meta charset="utf-8">
<style>
.dd {
position: relative;
display: block;
list-style: none;
line-height: 1.5;
}
.dd-list {
display: block;
position: relative;
padding: 0;
list-style: none;
}
.dd-list .dd-list {
padding-left: 2rem;
}
.dd-collapsed .dd-list {
display: none;
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
min-height: 20px;
line-height: 1.5;
}
.dd-handle {
display: block;
height: 30px;
margin: 5px 0;
padding: 5px 10px;
border: 1px solid #ccc;
background: #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-handle:hover {
color: #2ea8e5;
}
/* 注意这里只设置nesttable自带折叠按钮的样式 */
.dd-item>button[data-action] {
display: block;
position: relative;
cursor: pointer;
float: left;
width: 25px;
height: 20px;
margin: 5px 0;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: 0;
background: transparent;
font-size: 12px;
line-height: 1;
}
/* 注意这里只设置nesttable自带折叠按钮的样式 */
.dd-item>button[data-action]:before {
content: '+';
display: block;
position: absolute;
width: 100%;
text-align: center;
text-indent: 0;
}
.dd-item>button[data-action="collapse"]:before {
content: '-';
}
.dd-placeholder,
.dd-empty {
margin: 5px 0;
padding: 0;
min-height: 30px;
background: #f2fbff;
border: 1px dashed #b6bcbf;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-empty {
border: 1px dashed #bbb;
}
.dd-dragel {
position: absolute;
pointer-events: none;
z-index: 9999;
}
.dd-dragel>.dd-item .dd-handle {
margin-top: 0;
}
.dd-dragel .dd-handle {
-webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
}
</style>
</head>
<body>
<div class="dd">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
<button id="btn-demo" style="position: absolute;top: 0;right: 0;">A Button</button>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 5</div>
</li>
</ol>
</li>
</ol>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.js"></script>
<script src="https://cdn.bootcss.com/Nestable/2012-10-15/jquery.nestable.js"></script>
<script>
function someEvent(event){
console.log(this,event.type);
}
$('.dd').nestable();
$('body').on('mousedown', '.dd-item', someEvent);
$('body').on('click', '#btn-demo', someEvent);
</script>
</body>
</html>
结果:
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
委派事件就可以了
html代码
123<li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div></li>1234jquery代码$(document).on("click",".dd-item",function(){ alert("clicked"); })
html代码
123<li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div></li>1234jquery代码$(document).on("click",".dd-item",function(){ alert("clicked"); })
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
委派事件就可以了
html代码
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
</li>
jquery代码
$(document).on("click",".dd-item",function(){
alert("clicked");
})
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
