호버 및 기타 이벤트를 트리거하는 jQuery.trigger()에 대한 솔루션 공유

黄舟
풀어 주다: 2017-06-26 11:23:26
원래의
2955명이 탐색했습니다.

Baidu에서 Trigger의 사용법에 대해서도 알아봤습니다. 목적은 일치하는 요소에 대해 지정된 이벤트를 트리거하는 것입니다. 그러나 설명이 여전히 모호합니다. 아래 코드를 보도록 도와주세요

이것은 기본입니다. focus carousel Chart js hovering할 때

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

clearintervalpicture을 실행하고, 사진을 떠날 때 setinterval

을 트리거합니다. 그런데 마지막 문장.trigger('mouseleave')의 의미를 정말 이해하지 못합니다. 웹 페이지 열기를 실현하기 위해 타이머가 자동으로 트리거되어 캐러셀을 허용합니다. 그래프는 이벤트를 트리거하기 전에 Mouseleave를 기다리는 대신 전환을 활성화합니다.

주요 질문은 Trigger에 관한 것인데 여기서는 어떻게 구현되나요? 모두 감사합니다

초기화와 유사해야 하며 체인으로 작성됩니다. 전체 코드의 논리는 다음과 같습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿