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. 阻止默認事件：