<!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-Type" content="text/html; charset=utf-8" />

<title>阻止右键菜单（阻止默认事件）</title>

<style>

pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;}

span{color:#999;}

</style>

<script type="text/javascript">

document.oncontextmenu = function ()

{

    return false

}

</script>

</head>

<body>

<pre>

&lt;script type="text/javascript"&gt;

<span>//※oncontextmenu</span>

document.oncontextmenu = function ()

{

    return false

}

&lt;/script&gt;

</pre>

</body>

</html>
跟随鼠标移动（大图展示）
<!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-Type" content="text/html; charset=utf-8" />

<title>跟随鼠标移动（大图展示）</title>

<style type="text/css">

html,body{overflow:hidden;}

body,div,ul,li{margin:0;padding:0;}

#box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;}

#box li{float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;}

#box li.active{border:1px solid #a10000;}

#box li img{width:170px;height:170px;vertical-align:top;}

#big{position:absolute;width:400px;height:400px;border:2px solid #ddd;display:none;}

#big div{position:absolute;top:0;left:0;width:400px;height:400px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(img/loading.gif) 50% 50% no-repeat;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var aLi = document.getElementsByTagName("li");

    var oBig = document.getElementById("big");

    var oLoading = oBig.getElementsByTagName("div")[0];

    var i = 0;

    for (i = 0; i < aLi.length; i++)

    {

        aLi[i].index = i;

        //鼠标划过, 预加载图片插入容器并显示

        aLi[i].onmouseover = function ()

        {

            var oImg = document.createElement("img");

            //图片预加载

            var img = new Image();

            img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");

            //插入大图片

            oBig.appendChild(oImg);

            //鼠标移过样式

            this.className = "active";

            //显示big

            oBig.style.display = oLoading.style.display = "block";

            //判断大图是否加载成功

            img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";})

        };

        //鼠标移动, 大图容器跟随鼠标移动

        aLi[i].onmousemove = function (event)

        {

            var event = event || window.event;

            var iWidth = document.documentElement.offsetWidth - event.clientX;

            //设置big的top值

            oBig.style.top = event.clientY + 20 + "px";

            //设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.

            oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

        };

        //鼠标离开, 删除大图并隐藏大图容器

        aLi[i].onmouseout = function ()

        {

            this.className = "";

            oBig.style.display = "none";

            //移除大图片

            oBig.removeChild(oBig.lastChild)

        }

    }

};

</script>

</head>

<body>

<div id="box">

    <ul>

        <li><img src="img/shirt_1.jpg" /></li>

        <li><img src="img/shirt_2.jpg" /></li>

        <li><img src="img/shirt_3.jpg" /></li>

        <li><img src="img/shirt_4.jpg" /></li>

    </ul>

</div>

<div id="big"><div></div></div>

</body>

</html>
自定义右键菜单
<!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-Type" content="text/html; charset=utf-8" />

<title>自定义右键菜单</title>

<style type="text/css">

body,ul,li{margin:0;padding:0;}

body{font:12px/24px arial;}

#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}

#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}

#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}

#menu li.active{background:#999;}

#menu li.active a{color:#fff;background:#8f8f8f;}

#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;}

#menu li em.cur{background-position:0 0;}

#menu li em.copy{background-position:0 -24px;}

#menu li em.paste{background-position:0 -48px;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oMenu = document.getElementById("menu");

    var aLi = oMenu.getElementsByTagName("li");

    //加载后隐藏自定义右键菜单

    oMenu.style.display = "none";

    //菜单鼠标移入/移出样式

    for (i = 0; i < aLi.length; i++)

    {

        //鼠标移入样式

        aLi[i].onmouseover = function ()

        {

            this.className = "active"

        };

        //鼠标移出样式

        aLi[i].onmouseout = function ()

        {

            this.className = ""

        }

    }

    //自定义菜单

    document.oncontextmenu = function (event)

    {

        var event = event || window.event;

        var style = oMenu.style;

        style.display = "block";

        style.top = event.clientY + "px";

        style.left = event.clientX + "px";

        return false;

    };

    //页面点击后自定义菜单消失

    document.onclick = function ()

    {

        oMenu.style.display = "none"

    }

};

</script>

</head>

<body>

<center>自定义右键菜单，请在页面点击右键查看效果。</center>

<ul id="menu">

    <li><em class="cut"></em><a href="javascript:;">剪切</a></li>

    <li><em class="copy"></em><a href="javascript:;">复制</a></li>

    <li><em class="paste"></em><a href="javascript:;">粘贴</a></li>

</ul>

</body>

</html>

阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单的更多相关文章

  1. js去掉浏览器右键点击默认事件（+vue项目开启右键行为）

    js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...

  2. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. 阻止a标签的默认事件及延伸

    先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  4. JS阻止冒泡和取消默认事件(默认行为)

    本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...

  5. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  6. js阻止元素的默认事件与冒泡事件

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认 ...

  7. javascript -- 阻止默认事件 阻止事件冒泡

    1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: ...

  8. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  9. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  10. js禁止默认的右键菜单或出现自定义右键菜单

    1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...

随机推荐

  1. js 数组遍历

    map.filter.forEach.every.some http://www.runoob.com/jsref/jsref-obj-array.html 1.在字符串中使用 map 在一个Stri ...

  2. HDU 1867 A + B for you again ----KMP

    题意: 给你两个字符串,输出他们合并之后的字符串,合并的时候把A的后缀和B的前缀重叠合(或者把A的前缀和B的后缀重合).要求合并后的串既包含A右包含B, 且使得合并后的字符串尽量短,其次是使得合并后的 ...

  3. Unicode字符集和多字节字符集关系

      在计算机中字符通常并不是保存为图像,每个字符都是使用一个编码来表示的,而每个字符究竟使用哪个编码代表,要取决于使用哪个字符集(charset). 在最初的时候,Internet上只有一种字符集—— ...

  4. bzoj4104 [Thu Summer Camp 2015]解密运算

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4104 [题解] 脑洞+找规律做出来的.. 我用样例作为说明吧 样例给了我们这个 AAAC.A ...

  5. Linux Mint---ATI显卡驱动安装篇

    显卡驱动可谓是至关重要,当时折腾debian驱动的时候可是弄了好几天才搞定的,现在却非常容易就是装上, 详见这篇博客:http://www.yyearth.com/article/14-03/amd1 ...

  6. DNS 资源记录解释

    ;SOA授权的开始;;SOA或授权的开始记录用来表示区域的启动;每个区域必须只有一个SOA记录;从名字服务器,在不能和主服务器通信的情况下,将提供12小时DNS服务, 在指定的时间后停止为那个区域提供 ...

  7. Linux Context , Interrupts 和 Context Switching 说明【转】

    转自:http://blog.csdn.net/tianlesoftware/article/details/6461207 一. 进程Context 定义 当一个进程在执行时, CPU的所有寄存器中 ...

  8. android hook 框架 libinject 如何实现so注入

    前面两篇 android hook 框架 libinject2 简介.编译.运行 android hook 框架 libinject2 如何实现so注入 实际运行并分析了 Android中的so注入( ...

  9. selenium的动作链 actionchains

    click(on_element=None) ——单击鼠标左键 click_and_hold(on_element=None) ——点击鼠标左键,不松开 context_click(on_elemen ...

  10. css伪类元素：after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...