jQuery의 여러 요소에 대한 Hover 이벤트 샘플 코드에 대한 자세한 설명

• 1. 요구사항소개

• 2. 예제 연구

• 3.Solution

1.jQuery의 hover

이벤트

는 단일HTML 요소에만 적용됩니다. , 예 :

$('#login').hover(fun2, fun2);

fun1

함수

는 마우스가 #login 요소에 들어갈 때 호출되고, fun2 함수는 마우스가 떠날 때 호출됩니다. 이 API는 대부분의 요구 사항을 충족할 수 있습니다. 그러나 때때로 우리는 마우스가 두 개 이상의 요소의 "결합 영역"에 들어갈 때 fun1이 트리거되고 fun2가 그 요소를 떠날 때 트리거되기를 원하지만, 이러한 요소 사이에서 마우스를 움직여도 이벤트가 트리거되지 않습니다. 예를 들어 아래와 같이 두 개의 HTML 요소가 서로 옆에 있습니다.

fun1은 마우스가 둘의 "조합 영역"에 들어갈 때 트리거되고 fun2는 마우스가 떠날 때 트리거됩니다. 다음 방법을 사용하는 것을 생각할 수도 있습니다

$('#trigger, #drop'),hover(fun1, fun2);

이 방법은 우리의 요구 사항을 충족하지 않습니다. 왜냐하면 #trigger에서 #drop을 입력하면 fun2와 fun1이 순차적으로 트리거되기 때문입니다. 이 문제를 해결하기 위한 비교적 간단한 방법은 HTML 구조를 변경하는 것입니다. 구현은 다음과 같습니다.

<p id="container">
    <p id="trigger"></p>
    <p id="drop"></p>
</p>

$(&#39;#container&#39;).hover(fun1, fun2);

이 기능은 상위 요소에 hover 이벤트를 바인딩하여 수행됩니다.

2. 예시 연구

아래 그림은 일반적인

드롭다운 메뉴

간략화된 다이어그램입니다. HTML 구조는 다음과 같습니다.

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="droplist">
        <span>下拉菜单</span>
        <ul>
            <li>下拉项1</li>
            <li>下拉项2</li>
            <li>下拉项3</li>
        <ul>
    </li>
    <li></li>
</ul>

구현된 JavaScript 프로그램도 매우 간단합니다

$('#droplist').hover(function(){
    $(this).find('ul').show();
}, function(){
    $(this).find('ul').hide();
});

논리는 명확하지만 결과적으로 HTML이 됩니다. 중첩 수준이 너무 많아서 CSS를 작성할 때 많은 불편을 초래합니다. 예:

#nav li { font-size:14px;  }

우리는 이 CSS가 첫 번째 레이어 li 요소에 대해 14픽셀 글꼴을 설정하기를 원하지만 이는 두 번째 레이어 요소에도 영향을 미치므로 다음 문

#nav li li { font-size:12px; }

3을 사용하여 다시 작성해야 합니다. 해결방법

HTML 구조 변경

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="trigger">下拉菜单</li>
    <li></li>
</ul>
<ul id="drop">
    <li>下拉项1</li>
    <li>下拉项2</li>
    <li>下拉项3</li>
<ul>

JS 파일을 차례로 도입

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mixhover.js"></script>

제어 코드

$.mixhover(
    '#trigger', 
    '#drop', 
    function(trg, drop){
        #(drop).show();
    },
    function(trg, drop){
        #(drop).hide();
    }
)

이렇게 하면 마우스가 #trigger에 들어가면 #drop이 표시되고, 마우스가 움직일 때 이벤트가 발생하지 않습니다. #trigger to #drop 실제로는 #trigger 및 #drop 요소가 하나의 요소로 처리된다는 의미입니다.

jquery.mixhover.js 프로그램은 다음과 같습니다

/**
* Author: http://rainman.cnblogs.com/
 * Date: 2014-06-06
 * Depend: jQuery
 */
$.mixhover = function() {
    // 整理参数 $.mixhover($e1, $e2, handleIn, handleOut)
    var parms;
    var length = arguments.length;
    var handleIn = arguments[length - 2];
    var handleOut = arguments[length - 1];
    if ($.isFunction(handleIn) && $.isFunction(handleOut)) {
        parms = Array.prototype.slice.call(arguments, 0, length - 2);
    } else if ($.isFunction(handleOut)) {
        parms = Array.prototype.slice.call(arguments, 0, length - 1);
        handleIn = arguments[length - 1];
        handleOut = null;
    } else {
        parms = arguments;
        handleIn = null;
        handleOut = null;
    }

    // 整理参数 使得elements依次对应
    var elems = [];
    for (var i = 0, len = parms.length; i < len; i++) {
        elems[i] = [];
        var p = parms[i];
        if (p.constructor === String) {
            p = $(p);
        }
        if (p.constructor === $ || p.constructor === Array) {
            for (var j = 0, size = p.length; j < size; j++) {
                elems[i].push(p[j]);
            }
        } else {
            elems[i].push(p);
        }
    }

    // 绑定Hover事件
    for (var i = 0, len = elems[0].length; i < len; i++) {
        var arr = [];
        for (var j = 0, size = elems.length; j < size; j++) {
            arr.push(elems[j][i]);
        }
        $._mixhover(arr, handleIn, handleOut);
    }
};
$._mixhover = function(elems, handleIn, handleOut) {
    var isIn = false, timer;
    $(elems).hover(function() {
        window.clearTimeout(timer);
        if (isIn === false) {
            handleIn && handleIn.apply(elems, elems);
            isIn = true;
        }
    },
    function() {
        timer = window.setTimeout(function() {
            handleOut && handleOut.apply(elems, elems);
            isIn = false;
        }, 10);
    });
};

위 내용은 jQuery의 여러 요소에 대한 Hover 이벤트 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!