<!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. cpj-swagger分别整合struts2、spring mvc、servlet

    cpj-swagger 原文地址:https://github.com/3cpj/swagger 1. Swagger是什么? 官方说法:Swagger是一个规范和完整的框架,用于生成.描述.调用和可 ...

  2. lca板子

    #include<cstdio> #include<cstring> #include<algorithm> #define LL long long using ...

  3. apache 配置 SSL

    假设apache已经装好 1.使用yum install openssl,安装openssl 2.开启httpd.conf中LoadModule ssl_module modules/mod_ssl. ...

  4. WebApi初探之路由配置

    本文介绍了ASP.NET Web API路由HTTP请求控制器. 如果你熟悉ASP.NET MVC,Web API路由是和MVC路由非常相似的.主要差别是Web API使用HTTP方法而不是URI路径 ...

  5. HDU1083_Courses_课程_C++

    给你们人工翻译一下题目哈,刚好练一下英语 对于一个组中有 N 个学生和 P 种课程.每个学生能够参加0种,1种或者更多的课程.你的任务是找到一种可能的方案使恰好P个学生同时满足下列条件: ‧ 方案中的 ...

  6. iOS crash 崩溃问题的追踪方法

    http://www.cnblogs.com/easonoutlook/archive/2012/12/27/2835884.html iOS crash 崩溃问题的追踪方法 在调试程序的时候,总是碰 ...

  7. Linux SPI总线和设备驱动架构之一：系统概述【转】

    转自:http://blog.csdn.net/droidphone/article/details/23367051/ 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 硬 ...

  8. jquery做一个表单验证

    正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...

  9. Selenium2+python自动化11-定位一组元素find_elements【转载】

    前言 前面的几篇都是讲如何定位一个元素,有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象. webdriver 提供了定位一组元素的方法,跟前面八种定位方式 ...

  10. 使用Vagrant打造Linux开发环境

    1.安装Oracle VM VirtualBox.vagrant,安装完成需重启电脑 Oracle VM VirtualBox安装包下载:https://www.virtualbox.org/wiki ...