js監控滑鼠點擊事件_什麼用javascript讓一個對象同時監聽滑鼠單擊和滑鼠雙擊事件

① js中監聽iframe點擊事件

在js中，需要監聽iframe的點擊事件，但是因為瀏覽器的同源策略，是無法監聽到的，只能另闢蹊徑去解決它

注意，僅限於pc網站，意思就是必須要有滑鼠移入移出iframe的操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Detect IFrame Clicks</title>

<script src="./jquery-3.4.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var currentObj=Object

        var isOverIFrame = false;

        function processMouseOut(e) {

            console.log('out iframe',e.target);

            currentObj=e.target

            isOverIFrame = false;

            top.focus();

        }

        function processMouseOver(e) {

            // log("IFrame mouse >> OVER << detected.");

            console.log('in iframe',e.target);

            currentObj=e.target

            isOverIFrame = true;

        }

        function processIFrameClick(event) {

            if(isOverIFrame) {

                console.log('click iframe',event.target,currentObj);

            }

        }

        function attachOnloadEvent(func, obj) {

            if(typeof window.addEventListener != 'undefined') {

                window.addEventListener('load', func, false);

            } else if (typeof document.addEventListener != 'undefined') {

                document.addEventListener('load', func, false);

            } else if (typeof window.attachEvent != 'undefined') {

                window.attachEvent('onload', func);

            } else {

                if (typeof window.onload == 'function') {

                    var oldonload = onload;

                    window.onload = function() {

                        oldonload();

                        func();

                    };

                } else {

                    window.onload = func;

                }

            }

        }

        function init() {

            var element = document.getElementsByTagName("iframe");

            for (var i=0; i<element.length; i++) {

                element[i].onmouseover = processMouseOver;

                element[i].onmouseout = processMouseOut;

            }

            if (typeof window.attachEvent != 'undefined') {

                top.attachEvent('onblur', processIFrameClick);

            }

            else if (typeof window.addEventListener != 'undefined') {

                top.addEventListener('blur', processIFrameClick, false);

            }

        }

        attachOnloadEvent(init);

    });

</script>

</head>

<body>

<iframe src="https://www.hao123.com" width="80%" height="600px"></iframe>

<iframe src="https://www..com" width="80%" height="600px"></iframe>

</form>

</body>

</html>

復制上邊整段html，打開console控制台，即可解決這個問題，親測好用

② JavaScript怎樣捕獲滑鼠右鍵點擊瀏覽器事件

100 我做個小程序，在div中有數字，左鍵點擊++，右鍵點擊--。我現在用的是onClick，但是只能實現左鍵功能，郵件一點就出來瀏覽器的快捷菜單。請問怎樣才能捕獲右鍵點擊事件，並在處理後終止。謝謝！補充：我研究了好一陣，真是愚鈍。 <DIV onContextMenu="Click(this);return false;" 這個return false;絕不能寫到Click里頭去，那樣的話結束的是方法，只有寫在這里才是結束事件。JavaScript="xxx"不是委託一個方法處理事件，而是寫進去一行調用方法的代碼。補充：終於找到了，events如果不行的話就用window.event，你粘還不粘全了。讓我郁悶好一陣。好了，兩種方法都可以。 onContextMenu的缺點是每個標簽要定義兩個事件，onClick、onContextMenu；

③ JS如何判斷滑鼠滾輪事件分析

我們都見到過這些效果，用滑鼠滾輪實現某個表單內的數字增加減少操作，或者滾輪控制某個按鈕的左右，上下滾動。這些都是通過js對滑鼠滾輪的事件監聽來實現的。今天這里介紹的是一點簡單的js對於滑鼠滾輪事件的監聽。先分析原理：我們是通過判斷滑鼠滾動的獲取一個值，然後根據這個值判斷滾動的方向。然而不同瀏覽器有不同的獲取方法，所以要分瀏覽器寫方法。不同瀏覽器不同的事件首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），關於這兩個事件這里不做詳述，想要了解的朋友請先去了解滑鼠滾輪(mousewheel)和DOMMouseScroll事件。過程中需要添加事件監聽：兼容firefox採用addEventListener監聽。 js返回數值判斷滾輪上下判斷滾輪向上或向下在瀏覽器中也要考慮兼容性（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其餘四類使用wheelDelta；兩者只在取值上也是不一致，但是含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。具體的代碼如下所示： <label for=wheelDelta滾動值:</label(IE/Opera)<input type=text id=wheelDelta/ <label for=detail滾動值:(Firefox)</label<input type=text id=detail/ <script type=text/javascript var scrollFunc=function(e){ e = e || window.event; var t1=document.getElementById(wheelDelta); var t2=document.getElementById(detail); if(e.wheelDelta){//IE/Opera/Chrome t1.value=e.wheelDelta; }else if(e.detail){//Firefox t2.value=e.detail;}} /*監聽事件*/

④ js如何監聽瀏覽器全屏時退出按鈕事件

點擊按鈕退出全屏，這個點擊事件就好了唄，這是最簡單的事件了，至於按鈕為什麼出現，你可以仔細看看是滑鼠到達頁面頂端，按鈕才出現的，明白了吧

⑤ js滑鼠點擊事件在各個瀏覽器中的寫法及Event對象屬性介紹

IE
左鍵是
window.event.button
=
1
右鍵是
window.event.button
=
2
中鍵是
window.event.button
=
4
沒有按鍵動作window.event.button
=
0
Firefox
左鍵是
event.button
=
0
右鍵是
event.button
=
2
中鍵是
event.button
=
1
沒有按鍵動作
event.button
=
0
Opera
7.23/7.54
滑鼠左鍵是
window.event.button
=
1
沒有按鍵動作
window.event.button
=
1
右鍵和中鍵無法獲取
Opera
7.60/8.0
滑鼠左鍵是
window.event.button
=
0
沒有按鍵動作
window.event.button
=
0
右鍵和中鍵無法獲取
另外：屏蔽右鍵的是window.event.button
=
3
************************************************************
Window.event對象代表事件的狀態，例如觸發event對象的元素、滑鼠的位置及狀態、按下的鍵等等。
Window.event對象只在事件發生的過程中才有效。
Window.event的某些屬性只對特定的事件有意義。比如，fromElement
和
toElement
屬性只對
onmouseover
和
onmouseout
事件有意義。
如果事件觸發後，滑鼠移出窗口外，則返回的值為
-1
，這是個只讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
Event對象的屬性有：
altKey,
button,
cancelBubble,
clientX,
clientY,
ctrlKey,
fromElement,
keyCode,
offsetX,
offsetY,
propertyName,
returnValue,
screenX,
screenY,
shiftKey,
srcElement,
srcFilter,
toElement,
type,
x,
y
下面簡單的描述一下它的這些屬性：
1.altKey
描述：
檢查alt鍵的狀態。
語法：
event.altKey
可能的值：
當alt鍵按下時，值為
TRUE
，否則為
FALSE
。只讀。
2.button
描述：
檢查按下的滑鼠鍵。
語法：
event.button
可能的值：
0
沒按鍵
；1
按左鍵
；2
按右鍵
；3
按左右鍵
；4
按中間鍵
；5
按左鍵和中間鍵
；6
按右鍵和中間鍵
；7
按所有的鍵
這個屬性僅用於onmousedown,
onmouseup,
和
onmousemove
事件。對其他事件，不管滑鼠狀態如何，都返回
0（比如onclick）。
3.cancelBubble
描述：
檢測是否接受上層元素的事件的控制。
語法：
event.cancelBubble[
=
cancelBubble]
可能的值：
這是一個可讀寫的布爾值
TRUE
不被上層原素的事件控制。
FALSE
允許被上層元素的事件控制。這是默認值。
4.clientX
描述：
返回滑鼠在窗口客戶區域中的X坐標。
語法：
event.clientX
注釋：
這是個只讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
5.clientY
描述：
返回滑鼠在窗口客戶區域中的Y坐標。
語法：
event.clientY
注釋：
這是個只讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
6.ctrlKey
描述：
檢查ctrl鍵的狀態。
語法：
event.ctrlKey
可能的值：
當ctrl鍵按下時，值為
TRUE
，否則為
FALSE
。只讀。
7.fromElement
描述：
檢測
onmouseover
和
onmouseout
事件發生時，滑鼠所離開的元素。
參考18.toElement
語法：
event.fromElement
注釋：
這是個只讀屬性。
8.keyCode
描述：檢測鍵盤事件相對應的內碼。
這個屬性用於
onkeydown,
onkeyup,
和
onkeypress
事件。
語法：
event.keyCode[
=
keyCode]
可能的值：
這是個可讀寫的值，可以是任何一個Unicode鍵盤內碼。如果沒有引發鍵盤事件，則該值為
0
。
9.offsetX
描述：
檢查相對於觸發事件的對象，滑鼠位置的水平坐標
語法：
event.offsetX
10.offsetY
描述：
檢查相對於觸發事件的對象，滑鼠位置的垂直坐標
語法：
event.offsetY
11.propertyName
描述：
設置或返回元素的變化了的屬性的名稱。
語法：
event.propertyName
[
=
sProperty
]
可能的值：
sProperty
是一個字元串，指定或返回觸發事件的元素在事件中變化了的屬性的名稱。
注釋：這個屬性是可讀寫的。無默認值。你可以通過使用
onpropertychange
事件，得到
propertyName
的值。
12.returnValue
描述：
設置或檢查從事件中返回的值
語法：
event.returnValue[
=
Boolean]
可能的值：
true
事件中的值被返回
false
源對象上事件的默認操作被取消
13.screenX
描述：
檢測滑鼠相對於用戶屏幕的水平位置
語法：
event.screenX
注釋：
這是個只讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
14.screenY
描述：
檢測滑鼠相對於用戶屏幕的垂直位置
語法：
event.screenY
注釋：
這是個只讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
15.shiftKey
描述：
檢查shift鍵的狀態。
語法：
event.shiftKey
可能的值：
當shift鍵按下時，值為
TRUE
，否則為
FALSE
。只讀。
16.srcElement
描述：
返回觸發事件的元素。只讀。例子見本文開頭。
語法：
event.srcElement
17.srcFilter
描述：
返回觸發
onfilterchange
事件的濾鏡。只讀。
語法：
event.srcFilter
18.toElement
描述：
檢測
onmouseover
和
onmouseout
事件發生時，滑鼠所進入的元素。
參考7.fromElement
語法：
event.toElement
注釋：
這是個只讀屬性。
19.type
描述：
返回事件名。
語法：
event.type
注釋：
返回沒有「on」作為前綴的事件名，比如，onclick事件返回的type是click
只讀。
20.
x
描述：
返回滑鼠相對於css屬性中有position屬性的上級元素的x軸坐標。如果沒有css屬性中有position屬性的上級元素，默認以BODY元素作為參考對象。
語法：
event.x
注釋：
如果事件觸發後，滑鼠移出窗口外，則返回的值為
-1
這是個只讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
21.
y
描述：
返回滑鼠相對於css屬性中有position屬性的上級元素的y軸坐標。如果沒有css屬性中有position屬性的上級元素，默認以BODY元素作為參考對象。
語法：
event.y

⑥ js滑鼠事件有哪些

js 滑鼠事件詳細
常用的幾個類型

onClick
HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 滑鼠點擊事件，多用在某個對象控制的范圍內的滑鼠點擊

onDblClick
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 滑鼠雙擊事件

onMouseDown
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 滑鼠上的按鈕被按下了

onMouseUp
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 滑鼠按下後，松開時激發的事件

onMouseOver
HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 當滑鼠移動到某對象范圍的上方時觸發的事件

onMouseMove
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 滑鼠移動時觸發的事件

onMouseOut
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 當滑鼠離開某對象范圍時觸發的事件

若想檢測滑鼠左鍵、右鍵點擊事件可以用
事件button 值來檢測
例如
document.onMouseDown =function(ev){
var oEvent = ev||event;
alert(oEvent.button);
}
此時button= 0、1、2分別對應於滑鼠左中右

⑦ 什麼用javascript讓一個對象同時監聽滑鼠單擊和滑鼠雙擊事件

<input name="test" id="test" type="button" onmouseup="c()" value="單雙擊測試"/>
注意不是onclick，是內onmouseup

var count = 0;
var timer ;
function c(){
count ++;
timer = window.setTimeout(function(){
if(count==1) alert("單擊容");
else alert("雙擊");
window.clearTimeout(timer);
count=0;
},300)
}

⑧ JS滑鼠事件大全 JS滑鼠事件有哪些

1、如圖首先在一個文件夾下創建index.html文件。

導航:首頁 > 編程語言 > js監控滑鼠點擊事件

js監控滑鼠點擊事件

與js監控滑鼠點擊事件相關的資料

友情鏈接