마우스 오버 (또는 마우스 아웃)시 코드를 실행하는 모범 사례

요소를 가리킬 때 코드를 실행하려고합니다. 포인터가 사라지면 나는 아무 일도 일어나지 않기를 바란다. 이 코드는 내가 원하는 것을 정확하게 수행합니다 :마우스 오버 (또는 마우스 아웃)시 코드를 실행하는 모범 사례

$('li').hover(function() { 
    // actions here 
}, 
function() { 
}); 

$('ul').hover(function() { 
}, 
function() { 
    // other actions here 
});

그러나 그것은 추합니다. 이 클리너 버전이 작동하기를 기대하고있었습니다.

$('li').mouseover(function() { 
    // actions here 
}); 

$('ul').mouseout(function() { 
    // other actions here 
});

그러나 그렇지 않습니다. mouseover 부분은 한 번만 발사되기보다는 요소 위에 포인터를 올리면서 계속 발사됩니다.

의견이 있으십니까?

출처

2017-04-10 drake035

플래그를 사용하여 설정을 떠날 때 모든 활성 클래스를 제거 .... 입력 li에 대한 활성 클래스를 추가 그것이 처음으로 발생하면 거짓으로 바뀝니다. –

모든 li 요소를 가리키면 배경 이미지 (각 li 요소와 관련 있음)가 표시됩니다. 전체 목록에서 마우스를 가져 가면 기본 배경 이미지로 다시 전환하려고합니다. li 요소 사이를 가리키면 기본 이미지로 전환하고 싶지 않습니다. – drake035

ul

$('li').mouseenter(function(){ 
    $(this).addClass('active'); 
}); 

$('ul').mouseleave(function(){ 
    $(this).find('.active').removeClass('active'); 
})

출처

2017-04-10 16:02:24 charlietfl

대신 마우스 오버

당신은 가능성이 event delegation을 활용하고자하고

출처

2017-04-10 15:46:44

의 https://api.jquery.com/mouseenter/ mouseenter를 사용할 수 있습니다. 이 같은

뭔가 작업을해야합니다 :

$('ul').on('mouseover', 'li', function() { console.log('hovered'); });

출처

2017-04-10 15:46:50

마우스 오버 부분은 내가 요소를 통해 내 포인터를 이동 발사, 보다는 한 번 발사 유지합니다.

플래그를 사용하여 코드 블록을 한 번만 실행할 수 있습니다. 그러나 이벤트가 여러 번 다시 발생하는 것을 중지하지 않고 첫 번째 이벤트 이후에 이벤트를 무시합니다.

var flag = true; 
$('li').mouseover(function() { 
    if(flag){ 

    // actions here 
    flag = false; 
    } 
});

그러나 나는 .mouseenter()을 살펴볼 것을 권장합니다.

발췌문

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <ul> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
    </ul> 
 

 
    <script> 
 
     var flag = true; 
 
     $('li').mouseover(function() { 
 
     if(flag){ 
 
      console.log("testing"); 
 
      // actions here 
 
      flag = false; 
 
     } 
 
    }); 
 

 
    $('ul').mouseout(function() { 
 
    // other actions here 
 
    }); 
 

 
    </script> 
 
</body> 
 
</html>

출처

2017-04-10 15:51:32

마우스 오버 (또는 마우스 아웃)시 코드를 실행하는 모범 사례

답변

관련 문제