js自定义鼠标右键的实现原理及源码
作者:whsnow 发布时间:2024-04-28 09:51:39
标签:鼠标右键
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理:
1、屏蔽右键默认事件;(一度我以为修改的就是默认事件)
2、对一个ul的隐藏;(这个我也曾迂腐的认为值得这样操作的都是div,汗)
3、对鼠标点击右键做出的响应,显示隐藏的ul;
4、鼠标重新点击后,ul重新被隐藏
这样来看的话,我们需要做的事情是不是就简单了很多,先上代码:
html部分
<ul id="testRight" style="width: 100px;background-color: yellow;position: absolute;z-index: 100;">
<li><a href="#">开始</a></li>
<li><a href="#">暂停</a></li>
<li><a href="#">拜拜</a></li>
</ul>
javascript部分:
window.onload=function(){
var forRight=document.getElementById("testRight");//获取对象,现在太熟悉了
forRight.style.display="none";
var title=forRight.getElementsByTagName("li");
for(var i=0;i<title.length;i++){
title[i].onmouseover=function(){
this.classname="active";//其实这里我们也可以调用其他事件吧
};
title[i].onmouseout=function(){//这里也是鼠标的两个事件吧
this.classname="";
};
}
document.oncontextmenu=function(event){//这是实现的关键点
var event=event||window.event;//这个都不是问题了吧
forRight.style.display="block";
forRight.style.left=event.clientX+"px";
forRight.style.top=event.clientY+"px";//鼠标的坐标啊
return false;//这里返回false就是为了屏蔽默认事件
};
document.onclick=function(){//就是为了更形象的模仿啊
forRight.style.display="none";
};
};
先来看今天记录的最关键的地方:document.oncontextmenu这个事件返回false的话就是屏蔽默认事件,如果我们其他都不写,只在这个事件里面写return,好像就下面这样
document.oncontextmenu=function(){
return false;
}
这样的话,再点击右键也不会出现任何响应了。然后返回来再看整个的事件应用,好像除了这个事件,其他的都是比较熟悉的事件了,可就是对事件的这种整合总是缺乏,关键还是思路是创意吧,不过先不管哪儿多了,先整吧,但求熟读三千首,不求写来只问吟。扎马步,扎马步,扎马步.....
0
投稿
猜你喜欢
- 常用方法#记住引入numpy时要是用别名np,则所有的numpy字样都要替换 #查询数值类型>>>type(float)d
- 1、利用uuid函数生成唯一且不规则的主键idsql:CREATE TABLE `test` ( `id` varchar(10
- 在实际的数据库应用中,我们经常遇到这样一个问题,连接到Oracle数据库的用户在作了一次操作后,再也没有后续操作,但却长时间没有和数据库断开
- 概述在view函数中,如果需要中断request,可以使用abort(500)或者直接raise exception。当然我们还需要返回一个
- 自定义序列的相关魔法方法允许我们自己创建的类拥有序列的特性,让其使用起来就像 python 的内置序列(dict,tuple,list,st
- 对于数据库应用程序,数据库的安全是至关重要的。SQL Server的安全功能可以保护数据免受未经授权的泄漏和篡改!下边是对安全一章的总结!首
- 四种格式的解析:filelistslicelistdownload.cfgthird_party_download.cfg还是2个文件。替换
- 本文实例为大家分享了PyQt5如何能够创建在桌面屏幕上居中窗口的具体代码,供大家参考,具体内容如下下面的脚本说明我们如何能够创建在桌面屏幕上
- 如下所示:>> type(np.newaxis)NoneType>> np.newaxis == NoneTruen
- 一 基本知识millisecond 毫秒microsecond 微秒 nanosecond 纳秒1秒=1000毫秒 1毫秒=1000微秒 1
- 上一篇的DOCTYPE声明好以后,接下来的代码是:<html xmlns="xhtml" ta
- 整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享。<template> <div>  
- 介绍go1.5+版本提供编译好的安装包,我们只需要解压到相应的目录,并添加一些环境变量的配置即可。Go语言的安装步骤
- 本文实例讲述了Python3.6基于正则实现的计算器。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#!pyt
- 本文实例为大家分享了python实现图像边缘检测的具体代码,供大家参考,具体内容如下任务描述背景边缘检测是数字图像处理领域的一个常用技术,被
- 插入数据MySQL 表中使用 INSERT INTO SQL语句来插入数据。你可以通过 mysql> 命令提示窗口中向数据表中插入数据
- 前言Celery在python中的应用除了实现异步任务(async task)外也可以执行定时任务(beat)一、Celery定时任务是什么
- 本文实例为大家分享了Python Pygame实现俄罗斯方块的具体代码,供大家参考,具体内容如下源码:# coding : utf-8#:
- 或者说有一条命令 hostname [string],当string是不包含2950时,是true,包含2950时是false。使用Exce
- SQL Server数据库连接中常见的错误分析:一."SQL Server 不存在或访问被拒绝"这个是最复杂的,错误发生