在逛一些知名图片社区的时候，遇到自己心怡的图片，想要右键另存的时候，默认的浏览器菜单不见了，却出现了如：[©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. NYOJ-569最大公约数之和

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=569 此题目可以用筛选法的思想来做,但是用到一个欧拉函数 gcd(1,12)=1,gcd( ...

  2. IO-序列化 Serializable Parcelable Object

    简介 1.什么是序列化和反序列化 对象的寿命通常随着生成该对象的程序的终止而终止,有时候,可能需要将对象的状态保存下来,在需要时再将对象恢复.我们把对象的这种,能记录自己的状态以便将来再生的能力,叫作 ...

  3. LINQ Enumerable

    System.Linq.Enumerable类,提供了数十种称为扩展方法的共享方法,帮助您操作所有实现IEnumerable(of T)接口的类中的数据.由于Enumerable类的扩展方法可以处理许 ...

  4. css新增属性

    圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下: <head> <meta http-equiv=&q ...

  5. <customErrors>节点说明1

    <customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性, 其中defaultRedirect属性是一个可选属性,表示应用 ...

  6. HTML5与APP的交互

    phonegap框架,html5直接用于移动开发的框架.现版本UI延迟据说还是略大. App中搞活动,每次都通过mobile api把url给app即可. App操作Html webview.load ...

  7. Oracle数据库名、实例名、数据库域名、全局数据库名、服务名之间的区别

    数据库名.实例名.数据库域名.全局数据库名.服务名 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数据库 ...

  8. swift 闭包 由浅入深 优化

    //: Playground - noun: a place where people can play import UIKit ////////////////////////////////// ...

  9. 武汉科技大学ACM：1006: 我是老大

    Problem Description 今年是2021年,正值武汉科技大学 ACM俱乐部成立10周年.十周年庆祝那天,从ACM俱乐部走出去的各路牛人欢聚一堂,其乐融融.庆祝晚会上,大家纷纷向俱乐部伸出 ...

  10. uva 482 - Permutation Arrays

    <int, double> --> <int, string> 从而避免了输出格式: #include <vector> #include <strin ...