我正在尝试为eventListeners mouseover/out创建一个简单的构造函数，但我遇到了一个错误 - 我的对象构造函数HoverIntent不想识别自己的方法this.over中的this.elem值？
附言请原谅我在代码中如此疯狂的缩进，它们是由内部编辑器在插入时放置的。
function HoverIntent(elem) {
this.elem = elem; // recognize normaly
this.over = function() {
var tooltip = document.createElement('div');
tooltip.className = "tooltip";
tooltip.innerHTML = "some-usefull-text";
tooltip.style.left = this.elem.getBoundingClientRect().left + 'px';
// this.elem - getting an error
tooltip.style.top = this.elem.getBoundingClientRect().bottom + 5 + 'px';
// this.elem - getting an error
document.body.appendChild(tooltip);
};
this.out = function() {
var current = document.getElementsByClassName('tooltip')[0];
document.body.removeChild(current);
};
};
elem.addEventListener( 'mouseover', new HoverIntent(elem).over );
elem.addEventListener( 'mouseout', new HoverIntent(elem).out );<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.clock {
border: 1px dashed yellow;
padding: 5px;
display: inline-block;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="elem" class="clock">
<span class="hours">14</span> :
<span class="minutes">45</span> :
<span class="seconds">10</span>
</div>
<script>
</script>
</body>
</html>替换
this.over = function() {
跟
this.over = () => {
这将导致侦听器位于其构造函数的上下文中，而不是触发它的 DOM 元素中