明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

html中當(dāng)上下文菜單被觸發(fā)時(shí)運(yùn)行腳本的oncontextmenu事件

發(fā)表時(shí)間：2023-12-27 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]實(shí)例當(dāng)用戶在 <div> 元素 上右擊鼠標(biāo)時(shí)執(zhí)行 JavaScript ：<div oncontextmenu="myFunction()" contextmenu="mymenu">定義和使用oncontextmenu 事件在元素中...

實(shí)例

當(dāng)用戶在 <div> 元素 上右擊鼠標(biāo)時(shí)執(zhí)行 JavaScript ：

<div oncontextmenu="myFunction()" contextmenu="mymenu">

定義和使用

oncontextmenu 事件在元素中用戶右擊鼠標(biāo)時(shí)觸發(fā)并打開上下文菜單。

注意：所有瀏覽器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 瀏覽器支持。

瀏覽器支持

1W4LT7KJJT_}14H19MB8~FS.png

語(yǔ)法

HTML 中:

<element oncontextmenu="myScript">

JavaScript 中:

object.oncontextmenu=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("contextmenu", myScript);

注意： Internet Explorer 8 及更早 IE 瀏覽器版本不支持 addEventListener() 。

技術(shù)細(xì)節(jié)

是否支持冒泡:Yes
是否可以取消:Yes
事件類型:MouseEvent
支持的 HTML 標(biāo)簽:所有 HTML 元素

當(dāng)我們?cè)跒g覽器中點(diǎn)擊鼠標(biāo)右鍵時(shí)會(huì)彈出一個(gè)默認(rèn)的窗口，我們可以通過(guò)改變oncontexmenu事件來(lái)修改它的默認(rèn)事件；另外，當(dāng)我們按空格鍵時(shí)，瀏覽器窗口的滾動(dòng)條會(huì)向下滾動(dòng)一段距離，我們也可以通過(guò)綁定相應(yīng)的事件來(lái)改變它。如下：

<!doctype html>
<html>
    <head>
        <!--聲明當(dāng)前頁(yè)面編碼集(中文編碼<gbk,gb2312>,國(guó)際編碼<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="關(guān)鍵詞,關(guān)鍵詞">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            body{height:2000px;}
        </style>
    </head>
<body>
    <script>
/*屏蔽鼠標(biāo)右鍵的默認(rèn)事件*/
        document.oncontextmenu = function(){
            return false;
        };
/*屏蔽按空格鍵是滾動(dòng)條向下滾動(dòng)*/    
        document.onkeydown = function(ev){
            var e = ev  event;
            if(e.keyCode == 32){
                return false;
            }
        }
    </script>
</body>

</html>

下面是一個(gè)改變鼠標(biāo)右鍵的默認(rèn)事件案例：

<!doctype html>
<html>
    <head>
        <!--聲明當(dāng)前頁(yè)面編碼集(中文編碼<gbk,gb2312>,國(guó)際編碼<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="關(guān)鍵詞,關(guān)鍵詞">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            #box{display:none;width:150px;height:200px;background:gray;position:fixed;}
        </style>
    </head>
<body>
    <div id="box"></div>
        
    <script>
        var obox = document.getElementById("box");
        /*點(diǎn)擊鼠標(biāo)右鍵時(shí)執(zhí)行*/
        document.oncontextmenu =  function(ev){
            var e = ev  window.event;
            var x = e.clientX;
            var y = e.clientY;
            obox.style.cssText = "display:block;top:"+y+"px;left:"+x+"px;";
            return false;
        };
    /*點(diǎn)擊空白處隱藏*/
        document.onclick = function(){
            obox.style.display = "none";
        };
    </script>
</body>
</html>

以上就是html中當(dāng)上下文菜單被觸發(fā)時(shí)運(yùn)行腳本的oncontextmenu事件的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。