bootstrap-treeview自定义双击事件实现方法_javascript技巧
程序员文章站
2022-04-18 08:28:06
...
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。
经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解。最后救助大神,问题解决了,但是好像不太优雅但最终还是可以交差了。
这个解决方案中使用到了bootstrap-treeview自带的两个事件"nodeSelected"和"nodeUnselected".如果在treeview的节点上双击一定会触发选中事件和取消选中事件,计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔,人为操作300毫秒足够。
具体代码如下:
经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解。最后救助大神,问题解决了,但是好像不太优雅但最终还是可以交差了。
这个解决方案中使用到了bootstrap-treeview自带的两个事件"nodeSelected"和"nodeUnselected".如果在treeview的节点上双击一定会触发选中事件和取消选中事件,计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔,人为操作300毫秒足够。
具体代码如下:
粗滤讲解:
最主要的全局变量:lastSelectedNodeId,lastSelectedNodeId
最主要的方法:clickNode()
上面这个方法主要用来判断选中事件和取消选中事件操作的目标是否是一个且时间间隔是否足够小。符合这两个条件客户就是想触发双击事件。可以再函数customBusiness中自定义业务逻辑。
以上就是本文的详细内容,希望对大家的学习有所帮助。
推荐阅读
-
JavaScript调用Activex控件的事件的实现方法_javascript技巧
-
JavaScript调用Activex控件的事件的实现方法_javascript技巧
-
javascript实现单击和双击并存的方法_javascript技巧
-
js自定义方法通过隐藏iframe实现文件下载_javascript技巧
-
javascript实现在某个元素上阻止鼠标右键事件的方法和实例_javascript技巧
-
javascript实现单击和双击并存的方法_javascript技巧
-
JS实现在页面随时自定义背景颜色的方法_javascript技巧
-
js中自定义方法实现停留几秒sleep_javascript技巧
-
zepto.js中tap事件阻止冒泡的实现方法_javascript技巧
-
javascript 实现双击才能打开链接的方法_javascript技巧