现在的位置: 首页 > easyui > Menu > linkbutton > 正文
小 中 大
解决linkbutton组件disable方法无法禁用jQuery绑定事件的问题
2012年12月20日 ⁄ linkbutton ⁄ 共 3053字 ⁄ 评论数 5 ⁄ 被围观 21,146 views+
文章目录
[隐藏]

这个问题也是群内朋友给我反馈的，jQuery Easyui 1.3.1版本diable方法的现状是能够禁用href的跳转，能够禁用写在dom的onclick属性上绑定的事件处理程序，但是不能禁用使用jQuery绑定的事件处理程序，跟这类似的还有menu的disableItem方法，所以他们的解决方案也是一致的。 对于onclick方法绑定的事件直接备份到事件列表中，enable的时候用jQuery的bind方法绑定备份的事件处理程序，所以这时候其实dom的onclick属性已经为空了，功能上却能保持一致，直接上代码了：

实现代码：

  1. /**
  2.  * linkbutton方法扩展
  3.  * @param {Object} jq
  4.  */
  5. $.extend($.fn.linkbutton.methods, {
  6.     /**
  7.      * 激活选项（覆盖重写）
  8.      * @param {Object} jq
  9.      */
  10.     enable: function(jq){
  11.         return jq.each(function(){
  12.             var state = $.data(this, 'linkbutton');
  13.             if ($(this).hasClass('l-btn-disabled')) {
  14.                 var itemData = state._eventsStore;
  15.                 //恢复超链接
  16.                 if (itemData.href) {
  17.                     $(this).attr("href", itemData.href);
  18.                 }
  19.                 //回复点击事件
  20.                 if (itemData.onclicks) {
  21.                     for (var j = 0; j < itemData.onclicks.length; j++) {
  22.                         $(this).bind('click', itemData.onclicks[j]);
  23.                     }
  24.                 }
  25.                 //设置target为null，清空存储的事件处理程序
  26.                 itemData.target = null;
  27.                 itemData.onclicks = [];
  28.                 $(this).removeClass('l-btn-disabled');
  29.             }
  30.         });
  31.     },
  32.     /**
  33.      * 禁用选项（覆盖重写）
  34.      * @param {Object} jq
  35.      */
  36.     disable: function(jq){
  37.         return jq.each(function(){
  38.             var state = $.data(this, 'linkbutton');
  39.             if (!state._eventsStore)
  40.                 state._eventsStore = {};
  41.             if (!$(this).hasClass('l-btn-disabled')) {
  42.                 var eventsStore = {};
  43.                 eventsStore.target = this;
  44.                 eventsStore.onclicks = [];
  45.                 //处理超链接
  46.                 var strHref = $(this).attr("href");
  47.                 if (strHref) {
  48.                     eventsStore.href = strHref;
  49.                     $(this).attr("href", "javascript:void(0)");
  50.                 }
  51.                 //处理直接耦合绑定到onclick属性上的事件
  52.                 var onclickStr = $(this).attr("onclick");
  53.                 if (onclickStr && onclickStr != "") {
  54.                     eventsStore.onclicks[eventsStore.onclicks.length] = new Function(onclickStr);
  55.                     $(this).attr("onclick", "");
  56.                 }
  57.                 //处理使用jquery绑定的事件
  58.                 var eventDatas = $(this).data("events") || $._data(this, 'events');
  59.                 if (eventDatas["click"]) {
  60.                     var eventData = eventDatas["click"];
  61.                     for (var i = 0; i < eventData.length; i++) {
  62.                         if (eventData[i].namespace != "menu") {
  63.                             eventsStore.onclicks[eventsStore.onclicks.length] = eventData[i]["handler"];
  64.                             $(this).unbind('click', eventData[i]["handler"]);
  65.                             i--;
  66.                         }
  67.                     }
  68.                 }
  69.                 state._eventsStore = eventsStore;
  70.                 $(this).addClass('l-btn-disabled');
  71.             }
  72.         });
  73.     }
  74. });

使用事项：

  • 因为是直接覆盖linkbutton组件的diable和enable方法，所以用法不变。
  • 不要再用domObj.onclick=function(){..}这种方式去绑定事件，这里未作支持
  • 不要再用addEventListener或者attachEvent方法绑定事件，因为你已经用了jQuery框架
返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

tab组件的小工具条handler入参无法获取事件对象
可编辑表格使用经验分享(持续更新)
jQuery Easyui组件依赖关系图
jQuery禁用浏览器快捷键

目前有 5 条留言 其中：访客:3 条, 博主:2 条

  1. superdaxia : 2013年08月02日13:37:20  -49楼 @回复 回复

    不错的代码，赞一个 😛

  2. davidhuang : 2014年07月17日14:35:42  -48楼 @回复 回复

    你好，请问个问题:
    easyui linkbutton页面加载时设置属性为禁用,为何还是能响应单击事件
    $(‘#btnAdd’).linkbutton({
    disabled: true
    }); 😛


    • 管理员       世纪之光 : 2014年07月19日22:37:28  地下1层 @回复 回复

      easyui自身的linkbutton对禁用支持的不是很好，我这篇文章扩展的两个方式就是为了解决这个问题的。
      但是仅仅通过设置disabled属性，则不是扩展方法能解决的，只能改源码，或者在组件初始化后再调用我扩展的方法

  3. zzzz3621 : 2015年05月05日13:59:02  -47楼 @回复 回复

    div.onclick = function(event){
    console.log(‘触发事件’);
    };

    代码好像有问题，对于上面这种事件回调方式，51行处的代码会有问题，$(this).attr(“onclick”)返回的是undefined，所以$(this).attr(“onclick”, “”);执行不到


    • 管理员       世纪之光 : 2015年05月07日13:24:04  地下1层 @回复 回复

      请看最后的【注意事项】的第二条。使用jquery了，就不要再用dom.onclick这样去绑定事件了。

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×