在逛一些知名图片社区的时候，遇到自己心怡的图片，想要右键另存的时候，默认的浏览器菜单不见了，却出现了如：[©kevin版权所有]之类的信息；

今天在看Javascript事件默认行为相关的知识，所以，动手实现了下类似效果：

鼠标右键的时候，会出现如下所示的内容

在线演示地址：http://codepen.io/anon/pen/xGyXVy

相关代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>javascript:事件默认行为</title>

	<style type="text/css">

    #div1{

    	display: none;

    	position: absolute;

        padding: 6px 10px;

        color:#fff;

        border-radius: 3px;

    	background-color: #666;

    }

	</style>

</head>

<body>

<div id="div1">&copy kevin版权所有</div>

<script type="text/javascript">

	//oncontextmenu:右键菜单(环境菜单)显示的时候触发，通过return false阻止默认事件

	var oDiv1=document.getElementById('div1');

	document.oncontextmenu=function(ev){

		var ev=ev || event;

		var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

		oDiv1.style.display='block';

        oDiv1.style.left=ev.clientX +scrollTop+ 'px';

        oDiv1.style.top=ev.clientY +scrollTop+ 'px';

		return false;

	}

</script>

</body>

</html>

　　

Javascript:阻止浏览器默认右键事件，并显示定制内容的更多相关文章

  1. day49—JavaScript阻止浏览器默认行为

    转行学开发,代码100天——2018-05-04 今天主要说明一下通过JavaScript对浏览器默认行为的阻止操作.比如右键菜单的行为. 阻止默认行为的语句为: return false; 例如,阻 ...

  2. 纯JS阻止浏览器默认滚动事件，实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  3. javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  4. 原生javascript实现阻止浏览器默认行为与阻止事件冒泡

    不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ fu ...

  5. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  6. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  7. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

    转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件   var addEvent = function( obj, type, ...

  8. javascript小实例，阻止浏览器默认行为，真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法

    看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那 ...

  9. js停止冒泡和阻止浏览器默认行为

    停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C ...

随机推荐

  1. svn不提交user文件

    http://godera.blog.163.com/blog/static/215023060201312011112966/

  2. mui实现支付宝支付功能

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>H ...

  3. Entity Framework 重写OnModelCreating，控制生成表名的单复数

    重写OnModelCreating,控制生成表名的单复数 public class MYDbContext : DbContext { public DbSet<User> Users { ...

  4. IE7append新的元素自动补充完整路径

    在IE7下,进行append操作时,会把像<img />的src补成完整路径.对于上传到临时目录的图片,提交到后台要进行路径判断的情形要十分注意.

  5. 本机运行.net 2.0项目报错，解决方案

    本机在iis上运行.net 2.0项目时,报以下错误“请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理”: 本机环境配置: 安装有以下几个.net 版本:v1.0.3705,v1.1.4322 ...

  6. (转)第三方登录（QQ登录）开发流程详解

    近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑做一个详细的讲解. 对于整个流程的详细文档可以到QQ互联官网(http://wiki.conne ...

  7. SpringMVC简单例子

    http://www.cnblogs.com/wawlian/archive/2012/11/17/2775435.html

  8. ORACLE SQL单行函数（三）【weber出品必属精品】

    16.L:代表本地货币符,这个和区域有关.这个时候我们想来显示一下人民币的符号:￥ $ vi .bash_profile ---写入如下内容: export NLS_LANG='SIMPLIFIED ...

  9. 1.tomcat部署项目的几种方式和weblogic部署方式及一点通讯

      第一种部署方式: 直接使用myeclipse 找到server服务 添加要部署的项目Add Deployment ,然后选中某个项目,首选Exploded Archive(development ...

  10. canvas 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...