js学习笔记28----事件默认行为

事件默认行为 : 当一个事件发生的时候浏览器自己会默认做的事情。

怎么阻止?

当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;

右键菜单事件

oncontextmenu : ,当右键菜单(环境菜单)显示出来的时候触发。

自定义右键菜单代码示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <title>事件默认行为</title>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <style style="text/css">
 8             #div1{width: 100px;height: 200px;border: 1px solid #f00;position:absolute;display:none}
 9         </style>
10         <script>
11             window.onload = function(){
12                 var oDiv = document.getElementById("div1");
13                 document.oncontextmenu = function(ev){
14                     var ev = ev || event;
15                     oDiv.style.display = "block";
16                     oDiv.style.left = ev.clientX + ‘px‘;
17                     oDiv.style.top = ev.clientY + ‘px‘;
18                     return false;
19                 }
20                  document.onclick = function(ev){
21                     oDiv.style.display = "none";
22                  }
23             }
24         </script>
25     </head>
26     <body>
27         <div id="div1">
28
29         </div>
30     </body>
31 </html>
时间: 2024-09-30 19:24:01

js学习笔记28----事件默认行为的相关文章

JS学习笔记6_事件

1.事件冒泡 由内而外的事件传播(从屏幕里飞出来一支箭的感觉) 2.事件捕获 由表及里的事件传播(力透纸背的感觉) 3.DOM事件流(DOM2级) 事件捕获阶段 -> 处于目标阶段 -> 事件冒泡阶段(拿根针从屏幕扎进去,缝衣服的感觉) 事件捕获是从DOM树根到叶子的事件传播,所以可以在靠近根的位置捕获(event.stopPropagation)事件,让叶子收不到事件信号 事件冒泡是从叶子到根的原路返回过程,所以可以在靠近根的位置集中处理(event.target)叶子的事件,也就是所谓的事

js学习笔记:事件——事件流、事件处理程序、事件对象

Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡,即事件开始是由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 如果点击了页面中的一个div元素,那么这个click事件可能会按照如下顺序传播: < div> < body> < html> docume

Node.js学习笔记【1】入门(服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块)

笔记来自<Node入门>@2011 Manuel Kiessling JavaScript与Node.js Node.js事实上既是一个运行时环境,同时又是一个库. 使用Node.js时,我们不仅仅在实现一个应用,同时还实现了整个HTTP服务器. 一个基础的HTTP服务器 server.js:一个可以工作的HTTP服务器 var http = require("http"); http.createServer(function(request, response) { r

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

JS学习笔记--轮播图效果

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

Symfony2学习笔记之事件分配器

----EventDispatcher组件使用 简介:       面向对象编程已经在确保代码的可扩展性方面走过了很长一段路.它是通过创建一些责任明确的类,让它们之间变得更加灵活,开发者可以通过继承这些类创建子类,来改变它们的行为.但是如果想将某个开发者的改变跟其它已经编写了自己子类的开发者共享,这种面向对象的继承就不再那么有用了. 举一个现实的实例,你想为你的项目提供一个插件系统.一个能够被添加到方法的插件,或者在方法执行的前后完成某些工作,而不会干扰到其它插件.这个通过单一的继承完成不是一个

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e