在逛一些知名图片社区的时候，遇到自己心怡的图片，想要右键另存的时候，默认的浏览器菜单不见了，却出现了如：[©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. fork安全的gettid高效实现

    进程有id,可以通过getpid()获得,线程也有id,但是glibc没有提供封装.需要自己发出系统调用.在关键路径,系统调用还是对性能有影响的.因此我们可以想到类似glibc对getpid做的cac ...

  2. EasyUi DataGrid 绑定数据格式问题

    如果显示汇总记录则需设置页脚属性:首先设置showFooter:true, 然后后台计算出合计数据,一起传过来,类似如下:{"total":28,"rows": ...

  3. 杀掉linux所有进程的命令

    ps -ef|grep 'opt/*/tomcat_ssi'|grep -v "grep"|awk '{print $2}'|xargs kill -9

  4. WEB文件上传下载功能

    WEB文件上传下载在日常工作中经常用到的功能 这里用到JS库 http://files.cnblogs.com/meilibao/ajaxupload.3.5.js 上传代码段(HTML) <% ...

  5. UGUI之UI的深度问题

    学过NGUI的都知道,NGUI的深度是通过值来控制的.Panel也是UI也是,如果空间太多,布局复杂UI深度的值会变得很混乱.所以在NGUI中设置UI深度时一定要多加思考.然而在UGUI控制显示顺序的 ...

  6. linux学习笔记<基本知识普及>

    linux上分区类型 主分区 : 最多自能有4个 扩展分区 :  最多只能有1个 主分区加扩展分区最多只能有4个 不能写入数据,只能包含逻辑分区 逻辑分区 挂载(安装linux系统时若自定义分区,需注 ...

  7. Cacti监控Linux主机

    1 要监视一台Linux主机,需要在被监控的主机上安装net-snmp相关软件包,CentOS安装可使用“yum -y install net-snmp”命令:# yum -y install net ...

  8. QT学习篇：入门（1）

    第一个为管理界面: (1)安全库存的设置,包括序号.物品代码.物品类型.最大库存量.最小库存量.最大库存比率.最小库存比率: (2)计算频率设置,包括:实时,定时(单位分为:分钟.小时.天),来自gl ...

  9. intent.setFlags方法中参数值的含义

    intent.setFlags()方法中参数的含义 1.FLAG_ACTIVITY_NEW_TASK: 例如现在栈一的情况是:A    B   C(C位于栈顶),C通过intent跳转到D,并且这个I ...

  10. git clone 远程分支

    先初始化一个git 仓库  命令:git init git clone 相应的地址 这样就会形成一个.git 隐藏文件夹 一定要注意的,要进入到子文件夹去git checkout feature/0. ...