마우스 오버를 먼저 확인하고 트리거가 아닌 경우 마우스 오버

Question

두 가지 기능 : mouseover 및 mouseclick이 있습니다. 해당 이벤트에 해당 기능을 작성했습니다. 그러나 문제는 매번 mouseover이 내가 mouseclick을 대상으로하더라도 트리거된다는 것입니다.

처음으로 mouseclick을 식별 할 수있는 방법이 있습니까? 그렇지 않은 경우 mouseover 이벤트를 트리거 할 수 있습니까?

$('.test').mouseover(function (event) { 
    // ... 
} 

$('.test').mouseclick(function (event) { 
    // ... 
} 

Answer 1

마우스 오버없이 클릭 할 수 없습니다. 링크 나 버튼의 경우 "탭"키를 사용하여 거기에 도달하고 클릭 할 수 있지만 일반적으로 마우스를 사용하면 불가능합니다.

Answer 2

이 작업을 수행하는 데 올바른 방법을 사용하지 않고 있지만 여전히 솔루션을 사용하여 요구 사항을 충족시킬 수 있습니다.

이 코드에서 요소를 가리키면 코드가 2 초 후에 실행되도록 설정됩니다. 그러나 2 초 전에 요소를 클릭하면 시간 초과가 지워지고 settimeout 함수에서 코드가 실행되지 않습니다. 이 경우 mouseovermouseover 대신에 사용하는 것이 좋습니다. 행운을 빕니다.

Answer 3

플래그를 사용하여 먼저 클릭 이벤트를 트리거 할 수 있습니다. 아래의 코드를 실행 해보십시오와 회색 영역을 클릭하십시오 :

$clicked = false; 
 

 
$('.test').on("click", function (event) { 
 
    $('.msg').append("<div>click</div>").delay(3000).find("div:last").fadeOut(200, function(){$(this).remove();}); 
 
    $clicked = !$clicked; 
 
    if($clicked) 
 
     $(this).mouseover(); 
 
}); 
 

 
$('.test').on("mouseover", function (event) { 
 
    if($clicked){ 
 
     $('.msg').append("<div>mouseover</div>").delay(10000).find("div:last").fadeOut(500, function(){$(this).remove();}); 
 
    } 
 
    else $(this).html(''); 
 
}); 
 

 
$('.test').on("mousemove", function (event) { 
 
    if($clicked){ 
 
     $(this).html("mousemove: pageX: " + event.pageX + ", pageY: " + event.pageY); 
 
    } 
 
    else $(this).html(''); 
 
});

.test { 
 
    min-height: 100px; 
 
    border: 1px solid gray; 
 
    background-color: #efefef; 
 
    } 
 
.msg { 
 
    max-height: 100px; 
 
    overflow: auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    
 
</div> 
 
<div class="msg"></div>