day49—JavaScript阻止浏览器默认行为
转行学开发,代码100天——2018-05-04
今天主要说明一下通过JavaScript对浏览器默认行为的阻止操作。比如右键菜单的行为。
阻止默认行为的语句为:
return false;
例如,阻止浏览器默认菜单同时弹出自定义菜单的一个功能实现如下:
<div id="div1">
<ul>
<li>24334</li>
<li>sdafds</li>
<li>wrw23</li>
</ul>
</div>
<style type="text/css">
ul li{
list-style: none;
text-align: left;
font-size: 12px;
}
#div1{
width: 80px;
width: 100px;
position: absolute;
background: #ccc;
border: 1px solid black;
display: none;
}
</style>
Js部分需要对文档添加右键事件,通过该事件取消浏览器默认的右键菜单,同时弹出自定义菜单;
添加点击事件,通过点击实现自定义右键菜单的消失。
<script type="text/javascript">
document.oncontextmenu = function(ev){ var oEvent = ev||event;
var oDiv = document.getElementById("div1");
oDiv.style.display = "block";
oDiv.style.left = oEvent.clientX+"px";
oDiv.style.top = oEvent.clientY+"px";
return false;
} document.onclick = function(){
var oDiv = document.getElementById("div1");
oDiv.style.display = "none";
}
</script>
day49—JavaScript阻止浏览器默认行为的更多相关文章
- Javascript:阻止浏览器默认右键事件,并显示定制内容
在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以, ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- javascript小实例,阻止浏览器默认行为,真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法
看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那 ...
- 原生javascript实现阻止浏览器默认行为与阻止事件冒泡
不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ fu ...
- JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
- js阻止浏览器默认行为
js阻止浏览器默认行为 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- js停止冒泡和阻止浏览器默认行为
停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C ...
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, ...
随机推荐
- 简述COOKIE和SESSION的区别与联系?
cookie 和session 的区别:1.cookie数据存放在客户的浏览器上,session数据放在服务器上.2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 ...
- spring boot配置分页插件
在springboot中使用PageHelper插件有两种较为相似的方式,接下来我就将这两种方式进行总结. 方式一:使用原生的PageHelper 1.在pom.xml中引入依赖 <depend ...
- C++的同名属性(没有虚拟属性)、同名普通函数、同名静态函数(没有虚拟静态函数),是否被覆盖
例子1:属性的覆盖#include "stdafx.h" class A {public: int i; A() { i=1; }}; class B: public A {pub ...
- hdu1263 简单模拟
题意:依据水果销量表.依照特定格式输出 格式:首先按产地排序,然后同一产地按水果名排序 注意:第一,设计多级排序 第二.同一产地同一水果可能多次出现,所以须要在前面已经输入的水果里 ...
- 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制
****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...
- react 错误处理
https://www.jianshu.com/p/61d09e488743 https://codepen.io/sgroff04/pen/dVbgJy/
- 你不知道的props和state
State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...
- CABasicAnimation animationWithKeyPath Types
转自:http://www.cnblogs.com/pengyingh/articles/2379631.html CABasicAnimation animationWithKeyPath 一些规定 ...
- visual studio 2013 生成依赖项关系图出错
开始是说无法连接到sql服务器,我安装卸载localdb http://www.microsoft.com/zh-cn/download/details.aspx?id=29062 下载 CHS\x6 ...
- Qt Creator的初步使用
http://c.biancheng.net/view/1804.html 启动 Qt Creator,出现如图 1 所示的主窗口: 图 1 Qt Creator主窗口 Qt Creator 的界面很 ...