js中mouseenter

『壹』 js右键事件

DOM3级事件中定义了9个鼠标事件。

mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。

mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。

click:单击鼠标 左键 或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

dblclick:双击鼠标 左键 时触发。

mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。

mouseout:鼠标移出目标元素上方。

mouseenter:鼠标移入元素范围内触发， 该事件不冒泡 ，即鼠标移到其后代元素上时不会触发。

mouseleave:鼠标移出元素范围时触发， 该事件不冒泡 ，即鼠标移到其后代元素时不会触发。

mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

document.oncontextmenu =function(){return false};

document.body.onmouseup =function(e){

if(e.button===2){

console.log("右键");

    that.rightHand =true;

  }else if(e.button===1) {

console.log("中间键")

}else {

console.log("左键")

}

}

『贰』 javascript 如何让 鼠标点击一定区域 才触发事件

把鼻子配制成一个div块
然后在div块里面添加一个mouseenter方法回
例子：
var dov = document.getElementsByClassName("yincangkuang2")[0];
alert("创建对象成答功");
dov.addEventListener("mouseenter",function(){
alert("成功进入方法");
document.getElementById("yincangkuang1").style.color = "#00c";
alert("老铁稳")
document.getElementsByClassName("yincangkuang")[0].style.display = "block";
},true);

『叁』 javascript应注意的问题

以下是JavaScript容易犯错的几个"陷阱".由本人google+体验+搜集而来.虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些.

1. 最后一个逗号

如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语义不详，你只能用人眼从几千行代码中扫描。

Js代码
<script>
var theObj = {
city : "ShenZhen",
state : "ok",
}
</script>
<script> var theObj = { city : "ShenZhen", state : "ok", } </script>

2. this的引用会改变

如这段代码：

Js代码
<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
this.alertMessage = "Javascript rules";
this.ClickHandler = function() {
alert(this.alertMessage ); //行1
}
}();
document.getElementById("theText").onclick = MyObject.ClickHandler;
</script>
<input type="button" value="Gotcha!" id="MyButton" > <script> var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() { alert(this.alertMessage ); //行1 } }(); document.getElementById("theText").onclick = MyObject.ClickHandler; </script>

并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，在行1中，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：

Js代码
<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
var self = this;
this.alertMessage = “Javascript rules”;
this.OnClick = function() {
alert(self.value);
}
}();
document.getElementById(”theText”).onclick = MyObject.OnClick
</script>
<input type="button" value="Gotcha!" id="theText" > <script> var MyObject = function () { var self = this; this.alertMessage = “Javascript rules”; this.OnClick = function() { alert(self.value); } }(); document.getElementById(”theText”).onclick = MyObject.OnClick </script>

实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。

3. 标识盗贼

在JavaScript中不要使用跟HTML的id一样的变量名。如下代码：

Js代码
<input type="button" id="TheButton">
<script>
var TheButton = document.getElementById("TheButton");
</script>
<input type="button" id="TheButton"> <script> var TheButton = document.getElementById("TheButton"); </script>

IE会报对象未定义的错误。我只能说：IE 真烂.

4. 字符串只替换第一个匹配

如下代码：

Js代码
<script>
var fileName = "This is a title";
fileName=fileName.replace(" ","_");
</script>
<script> var fileName = "This is a title"; fileName=fileName.replace(" ","_"); </script>

而实际上，fileName结果是"This_is a title". 在JavaScript中，String.replace的第一个参数应该是正则表达式。所以，正确的做法是这样：

Js代码
var fileName = "This is a title".replace(/ /g,"_");
var fileName = "This is a title".replace(/ /g,"_");

5. mouseout意味着mousein

事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用js库来解决问题。

6. parseInt是基于进制体系的

这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt("09")，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是

Js代码
parseInt("09", 10).
parseInt("09", 10).

7. for...in...会遍历所有的东西

有一段这样的代码：

Js代码
var arr = [5,10,15]
var total = 1;
for ( var x in arr) {
total = total * arr[x];
}
var arr = [5,10,15] var total = 1; for ( var x in arr) { total = total * arr[x]; }

运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而for...in...会把它给遍历出来。
其实,就算没有引进库.它的结果也并不是数组所有元素的乘积,因为for...in...会遍历到数组的length属性.
所以这样做才是比较安全的：

Js代码
for ( var x = 0; x < arr.length; x++) {
total = total * arr[x];
}
for ( var x = 0; x < arr.length; x++) { total = total * arr[x]; }

其实，这也是污染基本类的prototype会带来危害的一个例证。

8. 事件处理器的陷阱

这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:

YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);

这应该也属于常识问题，但新手可能容易犯错。

9. focus() 出错

新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：

Js代码
var newInput = document.createElement("input");
document.body.appendChild(newInput);
newInput.focus();
newInput.select();
var newInput = document.createElement("input"); document.body.appendChild(newInput); newInput.focus(); newInput.select();

但是IE会报错。这是因为当你执行fouce()的时候，元素尚未可用。因此，我们可以延迟执行：

Js代码
var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild(newInput);
//在0.01秒之后调用匿名函数获取焦点
setTimeout(function(){
document.getElementById('TheNewInput').focus();
document.getElementById('TheNewInput').select();}, 10);
var newInput = document.createElement("input"); newInput.id = "TheNewInput"; document.body.appendChild(newInput); //在0.01秒之后调用匿名函数获取焦点 setTimeout(function(){ document.getElementById('TheNewInput').focus(); document.getElementById('TheNewInput').select();}, 10);
更详细的资料参见:http://realazy.org/blog/category/javascript-dom/

10.document.write()完全替换之前页面内容
有这样一段代码:

Js代码
<h3>开始</h3>
<script type="text/jscript">
function init() {
document.write("现在时间是:" + Date() );
}
window.onload = init;
</script>
<h3>结束</h3>
<h3>开始</h3> <script type="text/jscript"> function init() { document.write("现在时间是:" + Date() ); } window.onload = init; </script> <h3>结束</h3>

上面代码块中的"开始"和"结束"两块不会输出.
当onload事件结束之后,如果再一次调用document.write()方法写进一段HTML,这段HTML会完全替换掉之前页面的内容.整个页面的源代码就变为了document.write()所写的内容.把上面的改为:

Js代码
<h3>开始</h3>
<script type="text/jscript">
function init() {
document.write("现在时间是:" + new Date() );
}
init()
</script>
<h3>结束</h3>
<h3>开始</h3> <script type="text/jscript"> function init() { document.write("现在时间是:" + new Date() ); } init() </script> <h3>结束</h3>

"开始"和"结束"就会正常输出.

11.注意你name的值.

有这样一段代码:

Js代码
<form name="myForm" action="aa.htm">
<input type="text" name="action" />
</form>
<script>
//获取form的id
alert(document.forms[0].action);
</script>
<form name="myForm" action="aa.htm"> <input type="text" name="action" /> </form> <script> //获取form的id alert(document.forms[0].action); </script>

可输出结果不是我们想要的"aa.htm",而是一个"[object]"字符串.因为它得到的是myForm中的name为"action"的input标签的值.更详细的内容请参考[url]https://bugzilla.mozilla.org/show_bug.cgi?id=322488
[/url]

12.后台数据传输不会影响到前台

也许你会说这是一非常低级的错误.但我还是想说下:
页面login.htm代码

Js代码
...
xmlHttp.open("GET","check.htm",false);
xmlHttp.send();
alert(xmlHttp.responseText);
...
... xmlHttp.open("GET","check.htm",false); xmlHttp.send(); alert(xmlHttp.responseText); ...

页面check.htm代码

Js代码
...
window.onload=checkLogin;
function checkLogin(){
...
//如果验证失败,弹出错误
alert("登录失败");
...
}
...
... window.onload=checkLogin; function checkLogin(){ ... //如果验证失败,弹出错误 alert("登录失败"); ... } ...

很多人习惯用这种方法来进行登录失败的提示.但是要注意:xmlHttp发送数据的时候是进行的后台发送,它所关心的,仅仅是send之后,得到所请求URL的响应.而check.htm页面所执行的一切,都是只在后台完成.不管它怎么跳转,或者alert(),或者close().都不会在界面中有任何显示.

-----------------------------------------------------------------------------------------

在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。希望大家有更好的分享。

部分内容引用自:http://www.haoxiai.net/wangzhanzuo/JavaScript/48650.html

文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2008624/127762.html)

『肆』 老师，怎么用原生的JS实现JQ的mouseleave和mouseenter函数

你需要先获得static text控件的大小，之后在mousemove的消息响应中判断当前鼠标的点是否在控件的范围之内，如果在，设置颜色；如果不在，设置另一种颜色！

另外，你需要在对话框上先画出来static text控件，之后在对话框的wm_mousemove消息响应中进行上面的操作！！不需要派生cstatic类。

『伍』 js 如何判断当前选中哪个tab页

这里分享下js判断当前选中哪个是tab页的方法。

设备：联想电脑

系统：win7

软件：Visual Studio 2017

1、首先来看一下要实现的效果，如下图所示，顶上是tab页卡，下面是内容。

『陆』 mouseenter事件js中有吗

肯定有啊，jquery只是JS的类库，他也是原生JS写出来的，在JS里mouseenter的就是onmouseover 和 onmouseout 分表表示鼠标移入时和鼠标移出时，还有很多其他事件，你可以网络一下。

『柒』 JS—事件类型（焦点事件、鼠标事件（部分））

【需要注意】虽然focus与blur不冒泡，但是却可以在捕获阶段侦听到它们。

只定义了div2即棕色的那个div的事件
【解释enter与leave】：当鼠标由粉移向棕色时，显示enter，鼠标由棕移向绿时，不显示leave与enter。当移出粉色时，显示leave。
【解释over与out】：当鼠标由粉移向棕色时，显示over，鼠标由棕移向绿时，显示out在显示over，鼠标由绿移向棕时，显示out载显示over。为什么会显示呢？是因为事件冒泡，由棕移向绿时会触发div3的over事件，但是div3并没有定义，所以向上冒泡到div2。所以会显示div2的over事件。
【总结】mouseenter与mouseleave是IE提出的事件，不冒泡。但是mouseover与mouseout事件则通过简单的e.stopPropagation()也无法避免冒泡的现象。

『捌』 JavaScript中mouseout函数一般位置

与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
  解决两者的区别，看下面引用的例子：
  当为某个容器绑定了 onmouseover 或者onmouseout 事件时，如果这个容器中有其它元素节点，那么鼠标在内部移动时会频繁触发 onmouseover和onmouseout 事件。
  而我想要的效果是：事件仅在鼠标进入/离开元素区域触发一次，当鼠标在元素区域内部移动的时候不会触发。
  为什么会出现这个原因呢？其实是因为事件冒泡导致的。当鼠标移上或者移出容器中的子节点时，会分别触发mouseover和mouseout事件，紧随着dom树向上冒泡传递，直到被事件处理程序（监听器）捕获捕获或者冒泡到根节点（document或者window），也就是说事件会向它的父级对象派发。
知道了问题产生原因，那么解决起来是不是也很简单呢？最初我想的是取消事件冒泡，使用event.cancelBubble = true（IE）和e.stopPropagation()（其它浏览器），但是简单测试后发现貌似没有什么效果，问题依旧，貌似冒泡停止不了，原因不明。（补充：我是测试将容器中的a链接节点取消冒泡，但是发现鼠标移上移下还会触发事件。a节点下还有span节点。难道要将容器中所有节点都取消冒泡才行？有心人可以测试，如果真的这样，那也太恶心了，要是N多的节点，难道都要停止冒泡下？）
  其实在IE下鼠标事件有个 mouseEnter 和 mouseLeave，这个就是移进和移处容器时触发一次，在内部移动则不会触发，遗憾的是只有IE支持。我们现在要做的就是“为非IE浏览器添加mouseEnter和mouseLeave支持”。
  我翻阅了网络最新开源的JS库tangram，看了里面的处理，发现貌似是单独处理了非IE浏览器下的事件，使用一个叫“.event._eventFilter._crossElementBoundary(listener, e)”的方法修正mouseover和mouseout，然后封装了个mouseEnter和mouseLeave事件。
.event._eventFilter._crossElementBoundary = function(listener, e){
var related = e.relatedTarget,
current = e.currentTarget; if(typeof related == 'undefined'){ return listener.call(current, e);
} // 如果current和related都是body，contains函数会返回false
// Firefox有时会把XUL元素作为relatedTarget
// 这些元素不能访问parentNode属性
// thanks jquery & mootools
//如果current包含related，说明没有经过current的边界
//注：.dom.contains是个定义的检测节点是否包含的函数，下面我会讲到
if(related === false || current == related || related.prefix == 'xul' || .dom.contains(current, related)){ return ;
} //调用执行
return listener.call(current, e);
};123456789101112131415161718

  网络的方法我并不喜欢，首先它只对非IE浏览器进行了处理，当然，它又进行了封装，可以直接使用mouseEnter和mouseLeave；但是，我们做普通开发，没必要这么封装，我只是想要简单的去掉mouseover和mouseout的这个恼人特性。
  而jQuery则不是这么做的，它是直接对IE和其它所有浏览器下的mouseover和mouseout事件进行了修正。参考jQuery，我得到了我目前所有的代码。
  首先，介绍个判断节点对象是否包含的函数contains.
function contains(p,c){
return p.contains ?
p != c && p.contains(c) : !!(p.compareDocumentPosition(c) & 16);
}1234

  然后就是重点的了，这里我们在IE下用到了fromElement和toElement，这两个是IE下的鼠标移上去时和移出时的节点对象。
function fixedMouse(e,target){
var related, type=e.type.toLowerCase();//这里获取事件名字
if(type=='mouseover'){
related=e.relatedTarget||e.fromElement
}else if(type='mouseout'){
related=e.relatedTarget||e.toElement
}else return true; return related && related.prefix!='xul' && !contains(target,related) && related!==target;
}12345678910

  然后我们怎么用呢？比如在绑定事件时，
//addListener为封装的事件绑定函数addListener(target,'mouseover',function(e){
e=e||window.event; if(fixedMouse(e, target)){ //do something
}
},false);1234567

  这样就会只在移入移出target节点时触发mouseover和mouseout了。
  当然，你也可以将上面的代码单独封装成mouseEnter和mouseLeave，这样可以以后调用时更好区别mouseover和mouseout。

『玖』 JS 原生事件

首先，事件对象 event 是一个对象，包含着跟事件有关的所有信息，包括触发事件的 dom 以及 每种事件的一些特征。当dom操作触发某个事件时，会产生事件对象 event， 当事件被触发时产生，事件执行完毕时销毁。
获取鼠标在那个标签上 e.target

2.1. 事件捕获: 当时事件被触发的时候，系统会从 window 开始 依次向下遍历，遍历的过程中，遇到没有触发的相同事件便触发。
(window => document => html => body => 祖先元素 => 父元素 => 目标元素)

2.2 事件触发: 直到找到触发这个事件的元素，触发元素绑定的事件方法

2.3 事件冒泡: 触发目标事件之后，然后会一层一层向上遍历，遍历的过程中，遇到没有触发的相同事件便触发。

直到返回 window 结束 这整个过程叫做事件流。

事件捕获 和 事件冒泡 同一事件流 只能有一个生效，JS中默认执行事件冒泡 (false)。

3.1 Dom 0级
写法： ele.on事件名 = function(){}
特点： js 与 html 完全分离 便于封装
缺点: 同一个DOM对象 同时间只能绑定一个 同事件
    也就是说 一个 dom对象 只能执行一个事件处理函数
    如果给 这个事件 绑定了多个事件处理函数, 则执行最后一个事件处理函数

3.2 Dom 2级(事件监听)
写法：
    ele.addEventListener("事件类型",事件处理函数,bool)
    事件处理函数可以是： 匿名函数、 命名函数、 对象
    bool: 布尔值 (只有true 和 false) 不写默认为 false
    true： 触发 事件捕获   false：触发事件冒泡
特点:
    1.DOM 2级不会与DOM 0级事件冲突 同时存在时两个都执行
    2.可以绑定多个事件函数 不会起冲突
    Dom2级 可以删除命名函数 事件移除 removeEventListener

注意： 事件名中没有 on， on是DOM0级的写法

4.1 鼠标事件
 1. 单机事件 click
 2. 双击事件 dblclick
 3. 右键事件 contextmenu   默认事件：右击打开默认菜单栏
 4. 移入事件 mouseenter
 5. 移出事件 mouseout mouseover
 6. 移动事件 mouseenter mouseleave
 7. 按下事件 mousedown
 8. 释放事件 mouseup
 9. 滚轮事件 mousewheel   e.wheelDelta > 0 向上滑 < 0 向下滑

4.2 键盘事件
 1. 键盘按下事件 只要按下就一直触发 keydown 获取键码： e.keyCode
 2. 键盘抬起事件 keyup

4.3 UI事件(窗口事件)
 1. 资源加载完毕 load
 2. 窗口大小发生改变 resize
 3. 窗口滚动条 scroll
 4. 资源加载完毕 error

4.4 表单事件
 1. 获取焦点 focus
 2. 失去焦点 blur
 3. 正在输入 input
 4. 内容发生改变 change

1.获取鼠标坐标：
 1. 在浏览器的可视窗口的坐标 --- e.clientX / e.clientY
 2. 在标签内的坐标 ----- e.offsetX / e.offsetY
 3. 在屏幕内的坐标 ----- e.screenX / e. screenY
 4. 在文档中内的坐标 -- e.pageX / e.pageY

2. 阻止默认事件：