<!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. Agile已死， Agility长存

    注:本文系作者独立翻译,可以随意转载.如有雷同,纯属巧合.原文地址:http://pragdave.me/blog/2014/03/04/time-to-kill-agile/ P.s. 第一次自己翻 ...

  2. Linux 安装配置JDK

    一.下载jdk 参考:http://www.codingyun.com/article/40.html 可以先下载到本地,然后ftp到服务器 也可以直接在服务器下载(windows版本的区分32位与6 ...

  3. 关于#include <bits/stdc++.h>

    经常看人写#include <bits/stdc++.h>却不知道是干啥的? #include<bits/stdc++.h>包含了目前c++所包含的所有头文件 对比: #inc ...

  4. hdu 1465 不容易系列之一(错排模板)

    不容易系列之一 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  5. 51Nod 1561 另一种括号序列

    题目链接 分析: 卡常数~~~好气啊~~~这是看脸的时代啊~~~ $A$代表$($的数量,$B$代表$)$的数量... 如果$($的数量多于$)$的数量,那么最有方案显然是添加$A-B$个$)$... ...

  6. PHP高性能开发－多进程开发

    硬件多核时代的软件业以前计算能力的提升一直在摩尔定律的指引下,沿着提升CPU时钟频率这条道路前进,从初期的几十MHz到如今的几GHz.但是,进入2002年以 来,CPU提升主频的困难越来越大,因为主频 ...

  7. wget下载整个网站的方法

    转自: http://blog.itpub.net/29867/viewspace-716088/  (修改部分内容) wget --restrict-file-name=ascii -m -c -n ...

  8. vue学习之环境配置

    最近在学习vue,就顺手记录一下... 1. 安装 nodejs https://nodejs.org   -->注:安装LTS的(LTS为长期稳定版本) 在cmd中输入 node -v 如果显 ...

  9. centos编译安装vim并支持lua

    系统环境:centos6.5 x86 (basic server) 1.安装编译环境. # yum groupinstall "Development Tools" 2.安装vim ...

  10. hdu 5084(矩阵操作)

    HeHe Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...