1

我正在尝试将 HoverIntent 添加到 jQuery 选项卡。但是它不起作用，我的代码如下。有小费吗？谢谢你。

代码直接取自 jQuery UI 网站。（不起作用）

来源：http: //jqueryui.com/accordion/#hoverintent

演示：http: //jsfiddle.net/Ch7sL/

-- JS --

$( "#tabs" ).tabs({
      event: "click hoverintent"
    });

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 ) {
      var that = 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();
          event.type = "hoverintent";
          event.originalEvent = {};
          jQuery.event.handle.apply( that, args );
        } else {
          pX = cX;
          pY = cY;
          timeout = setTimeout( handler, cfg.interval );
        }
      }
      var timeout = setTimeout( handler, cfg.interval );
      target.mousemove( track ).mouseout( clear );
      return true;
    }
  };
4

2 回答 2

1

需要调用 javascript onDomready而不是 onLoad。并在 jQuery 之后添加jQuery Migrate以使HoverIntent正常工作。

更新代码：

$(function() {
$( "#tabs" ).tabs({
event: "click hoverintent"
});
});
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 ) {
var that = 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();
event.type = "hoverintent";
event.originalEvent = {};
jQuery.event.handle.apply( that, args );
} else {
pX = cX;
pY = cY;
timeout = setTimeout( handler, cfg.interval );
}
}
var timeout = setTimeout( handler, cfg.interval );
target.mousemove( track ).mouseout( clear );
return true;
}
};

更新 jsFiddle：http: //jsfiddle.net/uPWLn/

于 2013-03-11T20:11:31.040 回答
0

由于 JQuery 1.9.1 和当前版本 (3.5.1) 的更改，此线程很旧，并且不推荐使用提供的代码。

虽然网上还有其他一些jquery-hoverintent讨论，例如

[StackOverflow]延迟 jquery 悬停事件？

...这个线程很好，因为它直接解决了 Ajax 和 JQuery.tabs()生态系统，这里带有hoverIntent.js.

我想让这种方法/代码适用于我的项目，所以我将 @eric-goncalves优秀的 JSFiddle（其他答案，here）转储到 HTML 文件中并对其进行调试。

作为一个 Javascript 新手，我不确定这段代码是否是 JQuery ui-tab 延迟加载的最佳当前方法（再次注意上面链接的备受赞誉的 StackOverflow 讨论）。

由于嵌入到该代码中的特定应用程序以及缺少工作副本，我无法实现该示例，从而混淆了它的泛化。

但是我能够实现 Eric Goncalves 的代码，我在下面提供了一个完整的工作副本。:-)

<!DOCTYPE html>
<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<link rel="shortcut icon" href="#">

<title>Adding hoverintent to JQuery ui-tabs</title>
<!-- https://stackoverflow.com/questions/15346939/adding-hoverintent-to-jquery-ui-tabs -->

<!-- ALL JQUERY VERSIONS: https://code.jquery.com/jquery/ -->

<!-- <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> -->

<!-- COMMENT: all three of these JQuery scripts are required.  Note COMMENTS -->
<!-- in code for updates from jquery-1.9.1.min.js >> jquery-3.5.1.min.js -->

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<script type = "text/javascript">
  $(init);
  function init(){
      $("#tabs").tabs({event: "click hoverintent"});
  };  /* init(){} */

  var cfg = ($.hoverintent = {
    sensitivity: 3,
    interval: 400
  });  /* cfg */

  $.event.special.hoverintent = {
    setup: function() {
      $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },  /* setup (){} */

    teardown: function() {
      $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },  /* teardown */

    handler: function( event ) {
      var that = this,
      args = arguments,
      target = $( event.target ),
      cX, cY, pX, pY;

      function track( event ) {
        cX = event.pageX;
        cY = event.pageY;
      };  /* track */

      pX = event.pageX;
      pY = event.pageY;

      function clear() {
        target
        .unbind( "mousemove", track )
        .unbind( "mouseout", arguments.callee );
        clearTimeout( timeout );
      }  /* clear */

      function handler() {
        if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
          clear();
          event.type = "hoverintent";
          // prevent accessing the original event since the new event
          // is fired asynchronously and the old event is no longer
          // usable (#6028)
          //
          // COMMENT [2021-01-20]:
          //   "Uncaught TypeError: e.preventDefault is not a function"
          //   SWITCHING FROM JQuery 1.9.1 to 3.5.1 comment out this line:
          //
          // event.originalEvent = {};

          // COMMENT [2021-01-20]:
          //   "Uncaught TypeError: jQuery.event.handle is undefined"
          //   jQuery.event.handle is deprecated; you can use $.event.dispatch instead.
          //   https://stackoverflow.com/questions/16527658/jquery-error-typeerror-event-handle-is-undefined
          //
          // jQuery.event.handle.apply( that, args );
          jQuery.event.dispatch.apply( that, args );
        }  /* if */
        else {
          pX = cX;
          pY = cY;
          timeout = setTimeout( handler, cfg.interval );
        }  /* else */
      }    /* handler (inner) */

      var timeout = setTimeout( handler, cfg.interval );
      target.mousemove( track ).mouseout( clear );
      return true;
    }  /* handler (outer) */
  };   /* event.special.hoverintent */
</script>
</head>

<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. </p>
  </div>
</div>
</body>
</html>
于 2021-01-20T22:44:58.597 回答