2010-03-17 6 views
6

일반적인 자바 스크립트 질문입니다. 가능한 경우 jquery에서 수행하는 방법을 알고있는 것이 좋습니다.호버 (hover)에서 클릭 이벤트를 트리거 할 수 있습니까?

항목 위로 마우스를 가져 가면 클릭 이벤트를 트리거 할 수 있습니까?

나는 이유를 묻는 사람들이있을 것이라고 알고 있지만, 단지 나를 유머로 보내주십시오.

많은 감사, C

+0

사람들이 물어볼 것임을 알고 있다면 대략 설명하겠습니까? – Quentin

답변

11

trigger 기능을 살펴 보자 양자 택일 단지로 click() 코드를 이동

$(someElement).trigger('click'); 
+0

우수. 흥미가있는 사람을 위해 여기에 적어 놨습니까? http : //blog.clintonbeattie.com/monitor-hovered-items-in-google-analytics/ –

4

그냥, click()

$(selector).click(); 

을 사용 또는 일반적인 기능과 전화 번호는 hover()입니다.

4

아주 간단 :

$(selector).mouseenter(function() { $(this).click() }); 
0
$('#selector').bind('mouseover',function(){ 

/*DO WHAT YOU WANT HERE*/ 


}); 
트릭을 할해야

0
jQuery를 트리거 태그를 제외한 모든 객체가

가의 콘솔 에이 코드를 해보자 볼 '클릭'할 수

이 페이지의 내용

$('a').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('hover'); // let me know when it hovering <a> 
}); 
2
$('myselector').hover(function(){ 
    $(this).trigger('click'); 
}); 

EDIT : 게시물보다 늦지 만 처리기를 추가하고 트리거하는 방법을 설명하기 만하면됩니다.

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).on('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}).trigger('click'); 

한 번만 입력하면됩니까?

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).one('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here once 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseenter',function(){ 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}); 
0

이 호버에 클릭 이벤트를 트리거 할 수 있습니다.

는 다음의 예를보십시오 :

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>hover + (mouseup/mousedown, click) demo</title> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p class="up">Press mouse and release here.</p> 
<p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p> 
<p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p> 
<p class="hover3">Press mouse and release here. HOVER.CLICK</p> 

<script> 
$("p.up") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover1") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }) 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover2") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover2") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover3") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover3") 
    .click(function() { 
    $(this).append("<span style='color:#00f;'>CLICK.</span>"); 
    }); 
</script> 

</body> 
</html> 
0

당신은 즉시 실행되지 않도록 또한 마우스 오버시에 지연을 추가 할 수 있습니다. 지연은 섬네일 목록에서 사용할 경우 유용합니다.

var hoverTimer; 
var hoverDelay = 200; 

$('.classSelector').hover(function() { 
    var $target = $(this); 
    // on mouse in, start a timeout 
    hoverTimer = setTimeout(function() {   
     // do your stuff here 
     $target.trigger('click');   
    }, hoverDelay); 
}, function() { 
    // on mouse out, cancel the timer 
    clearTimeout(hoverTimer); 

}); 
관련 문제