В чем разница между событиями mouseover и mouseenter?

Ответ 1

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

  var я = 0;
$ ( "Div.overout" )
.mouseover(function() {
   i + = 1;
   $ (this).find( "span" ). text ( "mouse over x" + i);
 })
.mouseout(function() {
   $ (this).find( "span" ). text ( "mouse out" );
 });

var n = 0;
$ ( "Div.enterleave" )
.mouseenter(function() {
   n + = 1;
   $ (this).find( "span" ). text ( "mouse enter x" + n);
 })
.mouseleave(function() {
   $ (this).find( "span" ). text ( "mouse leave" );
 });Код>

  div.out {
 ширина: 40%;
 высота: 120 пикселей;
 margin: 0 15px;
 background-color: # d6edfc;
 плыть налево;
}

div.in {
 ширина: 60%;
 высота: 60%;
 background-color: # fc0;
 margin: 10px auto;
}

п {
 line-height: 1em;
 margin: 0;
 заполнение: 0;
}Код>

  < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery. min.js" > < &/сценарий; GT

< div class= "out overout" >
 <span> перемещают мышь </span>
 < div class=  "в"  >
 </дел >
</дел >

< div class= "out enterleave" >
 <span> перемещают мышь </span>
 < div class=  "в"  >
 </дел >
</DIV>код>

Ответ 2

Mouseenter и mouseleave не реагируют на событие пузырьков, а mouseover и mouseout делают.

Здесь статья, описывающая поведение.

Ответ 3

Как часто бывает с такими вопросами, Quirksmode имеет лучший ответ.

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

Ответ 4

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });

Ответ 5

Объясняет это довольно хорошо здесь

Ответ 6

Только Chrome позволяет предлагать имя для использования при нажатии ссылки с динамически созданным контентом. Тем не менее, вы можете сгенерировать контент, когда курсор мыши находится над ссылкой, и поместить его как DATAURI в стандартный статический href. Это позволяет в контекстном меню "Сохранить ссылку как..".

function download_content(a, side) 
{
    a.innerHTML = "preparing content..";

    var txt = "call a function to generate content";
    var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
    a.setAttribute('download', "chrome_let_you_suggest_a_name.txt");
    a.setAttribute('href', datauri);

    a.innerHTML = "content ready.";
}
document.getElementById('my_a_link').addEventListener('mouseover', function() { download_content(this); });

<a id="my_a_link" href="#">save document</a>