javascript-默认行为/右键菜单

1、自定义右键菜单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        #div1 {width: 100px;height: 100px;border: 1px solid #000;position: absolute;background: #CCC;display: none;}
    </style>
    <script>
        //阻止默认事件:右键菜单
        // document.oncontextmenu=function () {
        //     return false
        // }
        function getPos(ev) {

            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
 
            return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}

        }

        document.oncontextmenu=function (ev) {
            var oe=ev||event
            var od=document.getElementById(‘div1‘)
            od.style.display=‘block‘

            var odpos=getPos(ev)
            od.style.left=odpos.x+‘px‘
            od.style.top=odpos.y+‘px‘

            return false
        }

        document.onclick=function () {
            var od=document.getElementById(‘div1‘)
            od.style.display=‘none‘

        }

    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li>新建</li>
            <li>刷新</li>
            <li>关闭</li>
            <li>查看</li>
        </ul>
    </div>
</body>
</html>
时间: 2024-08-04 11:58:11

javascript-默认行为/右键菜单的相关文章

JavaScript模拟鼠标右键菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } #menu{ width: 254px; /*background-color: #ccc;*/

javascript简单的右键菜单定制

今天听了老师的课程,定制了一个右键菜单,写了个小例子供新手学习. 右键菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #context{ width:200px; height:auto; background:#ccc; display

javascript 自定义鼠标右键菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-color:ghostwhite; margin: 0; padding:

【JS】JavaScript禁止右键菜单和F12打开控制台看代码

<script type="text/javascript"> //禁止鼠标右键菜单和F12打开控制台看源码 function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("欢迎光临寒舍,有什么需要帮忙的话,请与站长联系!谢谢您的合作!!!"); oncontextmenu='return false'; } } if (document.lay

OpenLayers 3 之 添加地图鼠标右键菜单

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

阻止右键菜单(阻止默认事件)&amp;&amp;跟随鼠标移动(大图展示)&amp;&amp;自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javascript自定义右键菜单代码

javascript自定义右键菜单代码: 右键菜单这个再熟悉不过了,使用电脑的话每天几乎都要操作上千遍右键菜单,下面分享一段自定义右键菜单的代码实例,希望能够给需要相关内容的朋友带来帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao

让Fedora 25像centos7默认那样,在目录里随处右键菜单有个“打开终端”选项

1.如何让Fedora 25像centos7默认那样,在文件夹里随处右键菜单有个"打开终端",这样每次打开终端之后不必再cd到繁复的路径,万一打错还要查看图形界面的路径.其实只需安装一个工具:nautilus-terminal 打开终端,取得root权限,执行一下命令:dnf install -y nautilus-terminal等待安装完成之后,注销重进入就可以看到了. 需要注意一下,如果你的Fedora并不是25,可能会找不到nautilus-terminal 这个包 这时候你可

wpf中的默认右键菜单中的复制、粘贴、剪贴等没有本地化的解决方案

?? 现象: wpf开发中经常会遇到自己的界面已经本地化了, 但是系统默认的一些文字没有本地化, 比如:TextBox的右键菜单中Cut,Paste,Copy没有本地. 原因:机器装中.Net framework对应的Language pack没有装. 解决方法: 比如.net framework 4.0 的language pack的下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=23067 然后下载相应的语音包,系统

JavaScript 自定义html元素鼠标右键菜单

自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 编码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> window.onload = function(){ var menu = document.