`
zTreeAPI
  • 浏览: 345172 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于 onclick 与 bind ‘click’ 的讨论

阅读更多

    zTree v3.0 正式版发布后,整体反映还不错,我很高兴。 不过昨天 有位叫做 amixu 的朋友发现了一个让人有些烦恼的bug(请打开 v3.0 正式版 下载文件中的 core/url.html) 你会发现如果在 IE 下 那个 Nothing 的节点点击后依然会进行跳转,return false 失效了。(由于目前机器不是win7 所以 IE9 没有进行测试,这里说的 IE 是 6 7 8 )

 

    经过检查和反复测试,发现原因是 IE 在处理 onclick 和 后期绑定的 click 事件时对于默认操作的处理出现了问题。(个人认为应该属于 IE 的bug) 

 

    因此,昨天我及时修正了 API 中关于 treeNode.click 的说明文档,请大家尽量不要利用 treeNode.click = "return false;" 来阻止点击节点 url 跳转。 需要阻止跳转时,建议 不要将 url 路径保存在 treeNode.url 属性下; 同时利用 onClick 回调函数进行跳转控制。

 

    另外,如果一定要使用click属性,可以参考下面测试代码中使用的 stop 方法来实现。

 

    这里特别感谢 amixu czwlucky 两位朋友的大力协助。 同时也希望大家能一起讨论这个问题。

 

 

    附件中是测试代码

 

    下面是关于测试找出的事件处理机制的差异:

 

 

 

0
0
分享到:
评论
11 楼 zTreeAPI 2014-03-30  
zTreeAPI 写道
c2012 写道
我需要用到url,公司数据库的一些父节点写url也不予许我删除,后台处理起来效率很低。前台我试了  onClick: zTreeOnClick  发现return false照样跳转url,有没啥好办法?

你这种特殊情况,可以直接修改 setting.data.key.url 设置为 一个不存在的属性名字即可!

补充一下, 如果是有的节点需要,有的节点不需要, 那么就接着前面的解决方案利用 onClick 回调捕获点击节点的事件,再根据 url 属性用js 跳转即可
10 楼 zTreeAPI 2014-03-30  
c2012 写道
我需要用到url,公司数据库的一些父节点写url也不予许我删除,后台处理起来效率很低。前台我试了  onClick: zTreeOnClick  发现return false照样跳转url,有没啥好办法?

你这种特殊情况,可以直接修改 setting.data.key.url 设置为 一个不存在的属性名字即可!
9 楼 c2012 2014-03-26  
我需要用到url,公司数据库的一些父节点写url也不予许我删除,后台处理起来效率很低。前台我试了  onClick: zTreeOnClick  发现return false照样跳转url,有没啥好办法?
8 楼 lovecrock 2012-02-25  
javascript 的onclick绑定方式问题确实比较多,我是能不用就不用了。
7 楼 czwlucky 2012-01-29  
jonlik 写道
新手,问个问题。
<frameset cols="22%,*" >
   <frame frameborder="0" name="leftFrame" scrolling="NO" noresize src="tree.jsp">
   <frame frameborder="0" name="mainFrame" noresize src="main.jsp">
</frameset>
java中jsp页面分割问题,我现在把树形菜单放到tree.jsp里面了,然后我在子节点增加url设置超链,跳转项目中的action,就是最简单的传参至后台servlet中,或者struts2的action中,原来点击action是靠<a href="XXX?action=XX&type=YYY" target="mainFrame">中的target="mainFrame"控制页面跳转时候页面中frame的name="mainFrame"发生变化,现在用了这个插件,我看了超链的介绍跳转至新页面了,我想在本页面中某个分割的部分中显示我action后的页面可以吗?

2、target 属性用于设置 页面跳转的窗口目标  这里设置成你的目标窗口就行了,不知道你的问题是在这个地方吗?
6 楼 jonlik 2012-01-23  
新手,问个问题。
<frameset cols="22%,*" >
   <frame frameborder="0" name="leftFrame" scrolling="NO" noresize src="tree.jsp">
   <frame frameborder="0" name="mainFrame" noresize src="main.jsp">
</frameset>
java中jsp页面分割问题,我现在把树形菜单放到tree.jsp里面了,然后我在子节点增加url设置超链,跳转项目中的action,就是最简单的传参至后台servlet中,或者struts2的action中,原来点击action是靠<a href="XXX?action=XX&type=YYY" target="mainFrame">中的target="mainFrame"控制页面跳转时候页面中frame的name="mainFrame"发生变化,现在用了这个插件,我看了超链的介绍跳转至新页面了,我想在本页面中某个分割的部分中显示我action后的页面可以吗?
5 楼 czwlucky 2012-01-13  
wudixcy 写道
上述的图形上面有个词“父DOM”这个我不太明白指的是什么?

就是指<a>的父级DOM元素  <div><a></div> div就是父DOM
4 楼 wudixcy 2012-01-13  
上述的图形上面有个词“父DOM”这个我不太明白指的是什么?
3 楼 zTreeAPI 2012-01-13  
wudixcy 写道
善总结,善分享,能从别人提出的一个问题,总结出这么多问题,我佩服的五体投地了,问题是谁都会碰到了,可是不是谁都会总结的

  过奖啦,毕竟目前 zTree 已经得到那么多朋友的支持,有问题就要尽可能处理的彻底一些嘛。这样也能避免其他朋友再出类似的问题。 另外也省的天天总有不同的人来问我同样的问题。。呵呵
2 楼 wudixcy 2012-01-13  
我就是amixu啦,我当时的需求是:树叶上必须有链接,当点击树叶时我要获取这个链接地址,但不需要打开它。现在虽然它在IE下有bug,但是我想了想后,完全可以通过另外一种方式实现需求。
{ id:1, pId:0, name:"ztree", link:"http://ztreeapi.iteye.com/"}
这样就可以保证<a>标签里无href。又能通过treeNode.link获取到链接地址
1 楼 wudixcy 2012-01-13  
善总结,善分享,能从别人提出的一个问题,总结出这么多问题,我佩服的五体投地了,问题是谁都会碰到了,可是不是谁都会总结的

相关推荐

    Node.js-noBind-一个小工具没有更多的“绑定”JSX或任何其他上下文

    return &lt;button onClick={this.handleClick.bind(this)}&gt;Click me; } } ``` 这里使用`.bind(this)`来确保`handleClick`中的`this`指向组件实例。然而,这种方式会产生额外的性能开销,因为每次组件渲染时都会创建...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    element.addEventListener('click', function(event) { eval(functionName + "('" + pageIndex + "');Pager.SetCurrent(" + pageIndex + ");"); }, false); } ``` 需要注意的是,尽管这些方法可以解决兼容性问题...

    jquery移除button的inline onclick事件(已测试及兼容浏览器)

    在讨论如何在使用jQuery移除button元素上的inline onclick事件以及如何处理不同浏览器兼容性问题时,本文将详细探讨以下关键知识点: 1. inline onclick事件的工作原理和其潜在问题。 2. jQuery中移除和绑定事件的...

    JQuery中Bind()事件用法分析

    值得注意的是,jQuery中的事件方法通常是JavaScript事件前加上`on`,例如`onClick`、`onmouseover`,但在`bind()`方法中直接使用不带`on`的事件名即可。 `eventData`是可选参数,用于传递额外的数据给事件处理函数...

    onclick与listeners的执行先后问题详细解剖

    $('#div2').bind('click', fun).trigger('click'); ``` 这里,jQuery的`bind`会先注册事件监听器,然后`trigger('click')`会触发事件。但是,jQuery内部实现使得事件监听器在内联事件处理程序之前执行。这可能是出于...

    分享一道关于闭包、bind和this的面试题

    在JavaScript编程中,闭包、bind和this是三个非常重要的概念,它们经常在实际开发和面试中被提及。本文将通过一道具体的面试题来探讨这三个概念,并提供三种不同的解决方案。 首先,我们来看一下问题背景:我们需要...

    jquery应该如何来设置改变按钮input的onclick事件

    然而,如果绑定的函数与已存在的`onclick`属性冲突,可能会导致问题。 4. 自己想到的解决方案: 开发者可能使用了一个自定义的包装元素(例如`span`)来包含按钮,并通过操作`span`来达到改变按钮事件的目的。这种...

    浅谈javascript中的call、apply、bind

    document.addEventListener('click', onClick.bind(obj, 'p1', 'p2'), false); function onClick(a, b) { console.log(this.name, a, b); // onepixel p1 p2 } ``` 这些方法在JavaScript中广泛应用于继承、...

    解决layui动态添加的元素click等事件触发不了的问题

    这段代码的作用是在document对象上监听click事件,而当事件发生时,它会检查事件的目标元素是否符合选择器“.add_project”。如果是,那么就会执行定义好的函数,即弹出一个警告框显示“1”。 这段代码中涉及到了几...

    bind-all:用于将多个函数绑定到特定上下文的简单便捷函数

    return &lt;button onClick={this.increment}&gt;Click me; } } ``` 这样,即使`increment`方法在事件处理器中被调用,`this`也会正确地指向`MyComponent`的实例,从而能够访问和更新状态。 除了`bind-all`,还有其他...

    JQuery调用绑定click事件的3种写法

    $('#clickmebind').bind(click, function(){ alert&#40;Hello World bind&#41;; }); 第三种方式: $('#clickmeon').on('click', function(){ alert&#40;Hello World on&#41;; }); }); 注意:第三种方式只...

    jQuery事件多次绑定与解绑问题实例分析

    $("#btnAdd").bind("click", function () { alert("bind click3"); }); }); function add1() { alert("add1()"); } ``` 在这个例子中,点击按钮`#btnAdd`会依次弹出"bind click1", "bind click2", "bind click3"的...

    解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    通过上述的处理方法,我们就可以有效地解决Vue自定义拖拽指令时与click事件冲突的问题,同时也能解决Vue子组件生命周期相关的问题。这不仅提高了用户界面的友好性,也增强了程序的健壮性和可维护性。希望这些知识点...

    关于javaScript注册click事件传递参数的不成功问题

    这种方法类似于JavaScript内置的`Function.prototype.bind`方法。下面提供了一个`bindFunction`方法的实现,通过循环收集传递给`bindFunction`的参数,并返回一个新的函数,这个新函数会在被调用时使用`apply`方法,...

    jquer事件绑定

    - **`unbind()`方法**: 与`bind()`相对应,用于移除之前绑定的事件处理器。 - **`one()`方法**: 类似于`bind()`,但只执行一次后自动移除该事件处理器。 - **事件委托的最佳实践**: 尽量将事件绑定到离目标元素最近...

    动态生成的DOM不会触发onclick事件的原因及解决方法

    首先,传统的绑定事件方式,如直接在HTML元素上使用onclick属性,或者使用jQuery的.bind()方法,只适用于在绑定事件时已存在于页面上的DOM元素。对于后来动态添加到页面中的元素,这些事件监听器不会被自动应用。...

    04 React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值

    return &lt;button onClick={this.handleClick}&gt;Click me; } } ``` 2. **箭头函数**:另一种定义方法的方式是使用箭头函数,它能确保`this`上下文正确指向组件实例。但需要注意的是,这种方式每次渲染时都会创建新...

    JavaScript中利用jQuery绑定大事的几种方式小结_.docx

    上面使用到的 on 和 bind 方法效果是一样的。 方式四:使用 jQuery 的 on 方法绑定大事 使用 jQuery 的 on 方法可以给多个元素绑定一个或多个大事。例如: `$("#btn-list").on("click","input",function(evt){ ...

    一个使绑定和(特别是)解除绑定DOM事件更容易的实用程序-JavaScript开发

    const unbind:UnbindFn = bind(button,{type:'click',listener:onClick,}); //完成后:unbind(); 从'bind-event-listener'导入{bindAll}; const unbind = bind(button,[{type:'click',listener:...

Global site tag (gtag.js) - Google Analytics