js鼠标事情
js鼠标事情
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>7-70 课堂演示</title>
<style type="text/css">
div{
background: green;
padding: 20px;
width: 150px;
height: 150px;
left: 15px;
position: relative;
}
</style>
</head>
<body>
<div id="div1"></div>
<hr>
<input type="button" id="btn1" value="myFun1" ondblclick="myFun1()">
<input type="button" id="btn2" value="myFun2" >
<script>
var div1=document.getElementById('div1');
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2'); function myFun1(){
div1.innerHTML='<h2>鼠标双击事件</h2>'
div1.style.border='2px solid orange'
}
function myFun2(){
div1.innerHTML = "你在 div 中点击了鼠标右键!";
div1.style.color = "orange";
}
function myFun3() {
div1.innerHTML=('<h3>鼠标按下')
div1.style.color='red'
} function myFun4() {
div1.innerHTML=('<h3>鼠标松开')
div1.style.color='red'
}
function myFun5() {
div1.innerHTML=('<h3>鼠标移入')
div1.style.color='red'
}
function myFun6() {
div1.innerHTML=('<h3>鼠标移开')
div1.style.color='red'
} //鼠标按下
div1.onmousedown=myFun3
//鼠标松开
div1.onmouseup=myFun4
//鼠标移入
div1.addEventListener('mouseover',myFun5)
//鼠标移开
div1.addEventListener('mouseout',myFun6)
//鼠标右键单击事件
div1.addEventListener('contextmenu',
function (){
div1.innerHTML = "你在 div 中点击了鼠标右键!";
div1.style.color = "orange";
})
</script>
</body>
</html>
js鼠标事情的更多相关文章
- js鼠标及对象坐标控制属性详细解析
对js鼠标及对象坐标控制属性进行了详细的分析介绍. offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- js 鼠标事件的抓取代码
js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...
- js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
- JS鼠标滚动插件scrollpath使用介绍
JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...
- js鼠标划过事件
js鼠标划过事件一般有两对 onmouseover/onmouseout onmouseenter/onmouseleave 区别: 1.onmouseover/onmouseout 鼠标经过自身会触 ...
- js 鼠标和键盘事件
js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...
- js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式
js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...
随机推荐
- 笔试算法题(19):判断两条单向链表的公共节点 & 字符集删除函数
出题:给定两个单向链表的头结点,判断其是否有公共节点并确定第一个公共节点的索引: 分析: 由于是单向链表,所以每个节点有且仅有一个后续节点,所以只可能是Y型交叉(每条链表中的某个节点同时指向一个公共节 ...
- Python 文件修改-函数介绍
上节课复习:1.字符编码 1.1 如何解决乱码问题: 字符存取使用的编码标准不一致 1.2 文件头 在文件的首行写入文件头,用于控制Python解释器读取py文件内容时使用的编码 #coding:文件 ...
- Vue实例方法之事件的实现
开始 这段时间一直在看vue的源码,源码非常多和杂,所以自己结合资料和理解理出了一个主线,然后根据主线去剥离其他的一些知识点,然后将各个知识点逐一学习.这里主要是分析的Vue事件处理的实现. 正文 一 ...
- http chunked 理解
https://imququ.com/post/transfer-encoding-header-in-http.html #! /usr/bin/python #coding:utf8 import ...
- JSONArray 遍历方式
第一种(java8):遍历JSONArray 拼接字符串 public static void main(String[] args) { JSONArray jSONArray = new JSON ...
- 关于自定义checkbox-radio标签的样式的方法(label 和 background-position理解)
label label标签有一个很好的作用就是扩大表单控件元素的点击区域. 一般有两种方法可以达到效果:(1)使用label标签包裹表单控件(2)设置label标签的for属性和表单的id属性一致 这 ...
- 使用JS对form的内容验证失败后阻止提交
1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...
- GitHub & puppeteer & Chinese character & bug
GitHub & puppeteer & Chinese character & bug https://github.com/GoogleChrome/puppeteer/b ...
- [NOIP2004] 提高组 洛谷P1091 合唱队形
题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2, ...
- java编程思想-多态
java中除了static方法和final方法(private方法属于final方法)之外,其他所有的方法都是动态绑定即运行时绑定. public class test { private void ...