可靠的“mouseenter"没有jQuery
Reliable "mouseenter" without jQuery
我到处找,似乎找不到可靠的mouseenter
事件。
我发现最接近的是:mouseenter没有JQuery
function contains(container, maybe) {
return container.contains ? container.contains(maybe) : !!(container.compareDocumentPosition(maybe) & 16);
}
var _addEvent = window.addEventListener ? function (elem, type, method) {
elem.addEventListener(type, method, false);
} : function (elem, type, method) {
elem.attachEvent('on' + type, method);
};
var _removeEvent = window.removeEventListener ? function (elem, type, method) {
elem.removeEventListener(type, method, false);
} : function (elem, type, method) {
elem.detachEvent('on' + type, method);
};
function _mouseEnterLeave(elem, type, method) {
var mouseEnter = type === 'mouseenter',
ie = mouseEnter ? 'fromElement' : 'toElement',
method2 = function (e) {
e = e || window.event;
var related = e.relatedTarget || e[ie];
if ((elem === e.target || contains(elem, e.target)) &&
!contains(elem, related)) {
method();
}
};
type = mouseEnter ? 'mouseover' : 'mouseout';
_addEvent(elem, type, method2);
return method2;
}
唯一的问题是,当我运行它:
_mouseEnterLeave(ele, 'mouseenter', function(){
console.log('test');
});
每次触发侦听器时,我一次执行40-47次(每次不同)。
我也尝试了Quirksmode: http://www.quirksmode.org/js/events_mouse.html#mouseenter
function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
然而,这个是非常不可靠的,不仅如此,它假设父/元素是一个DIV
。这需要更有活力。这是一个库/脚本,所以我不能包含jQuery。
mouseenter
原生,这感觉像是浪费了从第一个例子的大量代码,只是为了一个小的UI的东西来支持Chrome。 是否有可能只是废弃mouseenter
,而不是使用mousemove
?它负责在鼠标移动时显示它。要使它在元素上直接悬停时保持可见,只需使用CSS。
#your_element {
display: none;
}
#your_element:hover {
display: block;
}
相关文章:
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 我该如何解决“;未捕获引用错误:谷歌没有定义"?(谷歌地图API)
- jQuery"或“;操作员没有处理mouseleave
- 取出图像标签alt:丢失"没有alt-id的图像标签是优选的并且不显示丢失的“;
- 为什么我得到“;没有方法'indexOf'"在ExtJS4.2中尝试在网格上使用缓冲渲染器时出错
- 我没有'我不明白“;temp<<=y"在这个javascript程序中执行
- 为什么下面抛出一个“;对象没有't支持属性或方法'importNode'"在IE11中
- IE 11没有显示“;显示内容"弹出消息
- ActionController::RoutingError(没有与[GET]"/members/js/boo
- 匹配“/"如果其后面没有紧接着“0”;(javascript中的“
- 错误:“;发送电子邮件失败:没有收件人"
- "$"未定义;jquery在<头部>;没有冲突的脚本或库
- 获得错误“;对象没有方法'jScrollPane'"与AngularJS一起使用时
- Node.js服务器在没有调用“;end()"用于服务器发送的事件
- "对象没有't支持这种性质或方法“;在IE 8中.在调试中执行精细
- "Function.createDelegate"原因;错误:对象没有't支持属性或方法
- "下一个“;按钮并没有按预期循环浏览答案
- Reset()和class=“”;btn大蒜自动保存"type=“;重置”;实际上并没有重新设定窗体
- "类型错误:对象没有´t支持这个未定义的动作“;Angular应用程序IE8中的错误
- "对象没有't支持这一行动”;请致电Ajax.autocompleter