<!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. JSON.stringify与jQuery.parseJSON

    1.JSON.stringify,这个函数的作用主要是为了系列化对象的.(或者说是将原来的对象转换为字符串的,如json对象): 首先定义一个json对象,var jsonObject = { &qu ...

  2. mac 安装 mysql 配置

    前言:下面主要介绍2种安装方法以及后续的配置,希望对大家有帮助.(推荐通过安装包的形式安装) 1. 使用安装包安装 mysql 双击打开安装文件         双击pkg文件安装         一 ...

  3. Linux 安装配置JDK

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

  4. ping(NOIP模拟赛Round 4)第一次程序Rank 1！撒花庆祝！~\(≧▽≦)/~

    题目: 恩,就是裸的字符串处理啦. 连标程都打的是暴力(随机数据太水啦!吐槽.) 本来O(n^2q)TLE好吧.. 然后我发明了一种神奇的算法,随机数据跑的很快!,当然最坏复杂度跟标程一样啦. 不过期 ...

  5. Andriod布局

    布局[ViewGroup]   像素单位的变化:是用dip,而不是px,主要用于宽高的设置 在Android中支持的描述大小区域的类型有以下几种. px(pixels)——像素:不同的设备显示效果相同 ...

  6. Xen虚拟化技术中PV和HVM的区别

    转自 这里 Xen是一个开源的type-1或者裸机管理程序,它使得一个物理主机能够同时并行运行多个相同的或者不同的操作系统实例.Xen是目前唯一的开源可得的type-1管理程序.Xen被应用于许多商业 ...

  7. 无法解析的外部符号 "public: static void __cdecl std::_String_base::_Xran(void)" (?_Xran@_String_base@std@@SAXXZ)"

    采用下面的方法.重新编译了一下依赖的库,OK了.   问题描述: 今天用VS2010编译一个在VS2008下Coding的工程的时候,VS给出了一堆链接错误信息,如下图所示: 在ErrorList里面 ...

  8. css容器

    .s1{ background-color:pink; font-weight:bold; font-size=16px; color:black; } #id1{ background-color: ...

  9. 自定义validate的效验规则 检验用户名是否存在

    <script type="text/javascript"> //自定义效验规则 $.validator.addMethod( //规则名称 "checkU ...

  10. 如何打造属于自己的Javascript武器库(封装方法)

    前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等. 今天这篇文章我们就来看看如何封装常用的Jav ...