从jQuery 1.7开始,UI Tabs上的hoverIntent事件不会触发

时间:2011-11-23 09:04:29

标签: jquery jquery-ui-tabs hoverintent

因为我已升级到jQuery 1.7,所以hoverIntent事件在UI选项卡上不再起作用。从jQuery 1.7开始,选项卡立即切换而不是使用hoverIntent。

以下是我用来初始化UI标签的代码:

$("#featured").tabs({event: "hoverintent"}).tabs({fx:{opacity: "toggle", duration: 250}}).tabs("rotate", 7000, true);
      $("#featured").hover(  
        function() {  
          $("#featured").tabs("rotate",0,true);  
        },  
        function() {  
          $("#featured").tabs("rotate",7000,true);  
        }  
    );

这是我在页面中包含的hoverIntent事件的js:

var cfg = ($.hoverintent = {
  sensitivity: 7,
  interval: 100
});

$.event.special.hoverintent = {
  setup: function() {
    $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
  },
  teardown: function() {
    $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
  },
  handler: function(event) {
    event.type = "hoverintent";
    var self = this,
      args = arguments,
      target = $(event.target),
      cX, cY, pX, pY;


    function track(event) {
      cX = event.pageX;
      cY = event.pageY;
    };
    pX = event.pageX;
    pY = event.pageY;
    function clear() {
      target.unbind("mousemove", track).unbind("mouseout", arguments.callee);
      clearTimeout(timeout);
    }
    function handler() {
      if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
        clear();
        jQuery.event.handle.apply(self, args);
      } else {
        pX = cX; pY = cY;
        timeout = setTimeout(handler, cfg.interval);
      }
    }
    var timeout = setTimeout(handler, cfg.interval);
    target.mousemove(track).mouseout(clear);
    return true;
  }
};

这里似乎有一个修复(对于UI Accordion):https://github.com/jquery/jquery-ui/commit/f0f54e38d8eab613d7ea25d698b81126e5263d83#diff-0

请参阅演示:http://jqueryui.com/demos/accordion/hoverintent.html

但是,我不确定,如何让hoverIntent再次工作。必须对上面的代码进行哪些更改?很高兴得到任何帮助!

1 个答案:

答案 0 :(得分:2)

将jQuery更新到v1.7.1解决了这个问题。