2016-12-13 7 views
2

Я имею две функции: mouseover и mouseclick. Я написал соответствующие функции в соответствующих событиях. Однако проблема в том, что каждый раз запускается mouseover, даже если я намеревался mouseclick.Идентифицировать mouseclick сперва и если нет триггера для mouseover

Есть ли способ идентифицировать mouseclick первым, а если нет, триггер для события mouseover?

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

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

Нет, это не возможно. 'mouseover' всегда срабатывает перед щелчком мыши, поскольку мышь должна быть над элементом, чтобы его можно было щелкнуть. –

+1

Вы сначала наведите курсор мыши, затем нажмите! –

+0

Может иметь некоторый флаг для проверки и управления событиями? –

ответ

0

Вы не можете кликать без наведения курсора мыши. В случае ссылок или кнопок вы можете использовать клавишу «tab» и добираться до нее и нажимать на нее, но в целом с помощью мыши это невозможно.

0

Вы не используете правильный подход, чтобы делать это, но все же вы можете использовать решение для достижения своего требования.

var myVar; 
$('.test').mouseenter(function (event) { 
    myVar = setTimeout(function(){ 
     console.info('over') 
    }, 2000);   
}) 

$('.test').click(function (event) { 
    clearTimeout(myVar);  
    console.info('click') 
}) 

В этом коде, когда вы наведете элемент, он установит код на запуск через 2 секунды. Но если вы нажмете элемент до 2 секунд, он очистит таймаут и не запустит код в функции setimeout. Будет полезно использовать mouseenter вместо mouseover в этом случае. Удачи :)

0

Вы можете инициировать событие щелчка сначала, однако, используя флаг. Попробуйте запустить фрагмент кода приведенную ниже и попробуйте нажать на серую область:

$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>