香草JavaScript绑定一个鼠标事件

-3

我需要在纯JS中写这个。我在calendarr时间轴中有一堆元素，有些是通过invoice_id链接的，所以我想在鼠标悬停在所有匹配的类元素上时将悬停类添加到所有匹配的类元素，然后在鼠标移除时移除悬停类。

我的鼠标悬停在部分工作正常，但我正在努力使鼠标悬停事件工作。

这里是我的JS：

function highlightRange(id) 
{ 
var d = document.getElementsByClassName('invoiceCell' + id); // get all the elements 

d.className += "hover";           // add the hover class 

for (var i = 0; i < d.length; i++) {       // remove the hidden class 
    d[i].classList.remove('hidden'); 
} 

// now how to I bind the mouseout event?? 
}

我有jQuery的运行一个类似的脚本，正是这样做的，但在这种情况下，我不能使用jQuery。

jQuery的版本是这样的：

function highlightRange(id) 
{ 
$(".price_cell_"+id).addClass('hover'); 

$(this).bind("mouseout", function(){ 
    $(".price_cell_"+id).removeClass('hover'); 
}) 
}

响应后编辑：

function highlightRange(id) 
{ 
var d = document.getElementsByClassName('invoiceCell' + id); // get all the elements 

d.className += "hover";           // add the hover class 

for (var i = 0; i < d.length; i++)        // remove the hidden class 
{ 
    d[i].classList.remove('hidden'); 

    d[i].on('mouseout', function(){ 
     d[i].classList.remove('hover'); 
     d[i].className += "hidden"; 
    }); 
} 
}

来源

2017-08-11 Nick

***叹息***你的意思是“纯粹的DOM”，而不是“纯粹的JS”。 jQuery是一个库，而不是一门语言。无论您使用DOM还是jQuery，**语言**（JavaScript）都是相同的。 –

developer.mozilla.org/en-US/docs/Web/Events/mouseout –

这归结为“我如何使用DOM钩住事件？”最细微的研究可以在这里和网络上找到对这个问题的答案。 –

这就是你想要的？

object.addEventListener("mouseout", function(){ 
... 
});

来源

2017-08-11 11:34:07

香草JavaScript绑定一个鼠标事件

回答

相关问题