ホームページ  >  記事  >  ウェブフロントエンド  >  ホバーやその他のイベントをトリガーする jQuery.trigger() に対するソリューションの共有

ホバーやその他のイベントをトリガーする jQuery.trigger() に対するソリューションの共有

黄舟
黄舟オリジナル
2017-06-26 11:23:262930ブラウズ

Baidu での Trigger の使用法についても学びました。その目的は、一致する要素で指定された event をトリガーすることです。ただし、以下のコードを参照してください。これは基本的なものです。 focus carousel chart js

picture

をホバリングするときのコード

 $(".scroll").mouseenter(function() {             if(adTimer){
             clearInterval(adTimer);
             }
     }).mouseleave(function(event) {
             adTimer =setInterval(function(){
                 showImg(index);                 index++;             if (index==len) {index=0;};
             },3000);
     }).trigger('mouseleave');

clearintervalと、画像から離れるときにsetintervalをトリガーする しかし、最後のsentence.trigger('mouseleave')の意味がよくわかりません。 Web ページの開始を実現するために、イベントをトリガーする前に Mouseleave を待つ代わりに、グラフによりカルーセルを許可するタイマーが自動的にトリガーされます。

主な質問はトリガーに関するものですが、ここではどのように実装されていますか?皆さんありがとうございます

初期化と同じようにチェーンで書かれているはずです。コード全体のロジックは次のとおりです: 1. マウス入力時間をバインドします。 2. マウス離脱イベントをバインドします。 3. マウス離脱イベントをトリガーします。つまり、setInterval を初期化して実行します。

個人的にはこの書き方はお勧めしません。私なら次のように書きます:

// 对象变量var $scroll = $('.scroll'),
    adTimer = null;// 事件绑定$scroll.on({    'mouseenter.scroll': function (e) {
        e.preventDefault();        // 清除计时
        if (adTimer) {
            clearTimeout(adTimer);
        }
    },    'mouseleave.scroll': function (e) {
        e.preventDefault();        // 开始计时
        adTimer = setTimeout(function () {            // 执行其他逻辑
            // ····
        }, 3000);
    }
});// 初始化$scroll.trigger('mouseleave.scroll');
 $(".scroll").mouseenter(function() {             if(adTimer){
             clearInterval(adTimer);
             }
     }).mouseleave(function(event) {
             adTimer =setInterval(function(){
                 showImg(index);
                 index++;             if (index==len) {index=0;};
             },3000);
     });
     $(".scroll").trigger('mouseleave');

このように考えると、よりよく理解できるでしょう

トリガーはイベントを発生させる必要はなく、自動的にイベントを実行します。カスタム イベントはトリガーによってトリガーされる必要があります。

以上がホバーやその他のイベントをトリガーする jQuery.trigger() に対するソリューションの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。