来自 Web前端 2020-04-15 19:53 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

ios 键盘弹起bug,出现的问题,光标穿透,页面无法点击网上澳门金莎娱乐

时间: 2019-09-24阅读: 143标签: bug

轻松学习JavaScript二十八:DOM编程学习之事件处理函数

在JavaScript语言中可以处理的事件类型可以分为:鼠标事件,键盘事件和HTML事件。对于于每一个事件,它都

有自己的触发范围和方式,如果超出了触发范围和方式,事件处理就会失效。所有的事件处理函数都会有两个部分组

成,on+事件名称,例如click事件的时间处理函数就是:onclick。

JavaScript事件处理函数及其使用列表

网上澳门金莎娱乐 1

网上澳门金莎娱乐 2

一鼠标事件:页面所有元素都可触发

(1)click:当用户单击鼠标按钮或按下回车键时触发。onclick事件是我们最常用的鼠标事件,几乎涵盖了网页中的

很多与用户交互的过程。我们只是看一个简单的实例:  

<script type="text/javascript"> window.onload=function(){ var div=document.getElementById("test"); div.onclick=function(){ this.style.backgroundColor="red"; } } </script>

Click Me

点击之前(初始化状态):
网上澳门金莎娱乐 3
点击之后(也是以后一直保持的状态):
网上澳门金莎娱乐 4

(2)dblclick:当用户双击主鼠标按钮时触发。这个鼠标事件一般很少用到,我们就不再举例了。

(3)mousedown:当用户按下了鼠标还未弹起时触发。

(4)mouseup:当用户释放鼠标按钮时触发。

onmousedown、onmouseup 以及onclick事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发

onmousedown事件,然后,当鼠标按钮被松开时,会触发onmouseup事件,最后,当鼠标点击完成时,触发onclick

事件。我们来看一个简单的实例:

<script type="text/javascript"> window.onload=function(){ var div=document.getElementById("test"); div.onmousedown=function(){ this.style.backgroundColor="blue"; this.innerHTML="松开鼠标"; } div.onmouseup=function(){ this.style.backgroundColor="yellow"; this.innerHTML="谢谢"; } } </script>

Click Me

鼠标未点击之前(初始化状态):
网上澳门金莎娱乐 5 鼠标点下去不松开:
网上澳门金莎娱乐 6 鼠标松开(最后保持的状态,再次刷新后为初始化状态):
网上澳门金莎娱乐 7

(5)mouseover:当鼠标移到某个元素上方时触发。

(6)mouseout:当鼠标移出某个元素上方时触发。

这两个事件一般同时使用,也是经常做Web前端开发用到的。比如导航栏的下拉菜单等各种动态效果。我们来看

一个简单的实例:

<script type="text/javascript"> window.onload=function(){ var div=document.getElementById("test"); div.onmouseover=function(){ this.innerHTML="谢谢"; } div.onmouseout=function(){ this.innerHTML="把鼠标移上来"; } } </script>

Mouse Over Me

鼠标放上去之前(初始化状态):
网上澳门金莎娱乐 8 鼠标放上去之后:
网上澳门金莎娱乐 9 鼠标放下去之后(最后保持的状态,再次刷新后为初始化状态):
网上澳门金莎娱乐 10

(7)mousemove:当鼠标指针在元素上移动时触发。这个好演示,只是没有什么多大的变化,我们等到实际用到

了在进行详细的演示和了解。

二键盘事件

keydown:当用户按下键盘上任意键时触发,如果按住不放,会重复触发。

keypress:当用户按下键盘上的字符键时触发,如果按住不放,会重复触发。

keyup:当用户释放键盘上的键时触发。

由于浏览器兼容性的问题,在这里就不再举例。详细了解的话可以参考:http://www.jb51.net/article/21592.htm

三HTML事件

(1)load:当页面完全加载后在window上面触发,或当框架集加载完毕后在框架集上触发。

(2)unload:当页面完全卸载后在window上面触发,或当框架集卸载完毕后在框架集上触发。

当用户进入或离开页面时,会触发onload和onunload事件。onload事件可用于检查访客的浏览器类型和版本,以

便基于这些信息来加载不同版本的网页。onload和onunload事件可用于处理 cookies。onload事件我们在前面已经使

用过,就不再进行举例。

(3)select:当用户选择文本框(input或textarea)中的一个或多个字符时触发。

<script type="text/javascript"> window.onload=function(){ var userName=document.getElementById("userName"); userName.onselect=function(){ alert("你选中了"+this.value); } } </script>请输入你的英文名:

当输入字段并选中字符时发生的事件。

效果:
网上澳门金莎娱乐 11

(4)change:当文本框(input或textarea)内容改变且失去焦点后触发。我们举行一个简单的实例:

<script type="text/javascript"> window.onload=function(){ var userName=document.getElementById("userName"); userName.onchange=function(){ this.value=this.value.toUpperCase(); } } </script>请输入你的英文名:

当你离开输入框时,被触发的函数会把你输入的文本转换为大写字母。

未失去焦点之前:
网上澳门金莎娱乐 12 失去焦点之后:
网上澳门金莎娱乐 13

(5)focus:当页面或者元素获得焦点时window及相关元素上触发。

(6)blur:当页面或者元素失去焦点时window及相关元素上触发。

对于上述的两个事件也是在一起使用的事件,我们看一个简单的实例:

<script type="text/javascript"> window.onload=function(){ var div=document.getElementById("test"); div.onmouseover=function(){ this.innerHTML="谢谢"; } div.onmouseout=function(){ this.innerHTML="把鼠标移上来"; } } </script>

Mouse Over Me

当输入字段获得焦点时,会触发改变背景颜色的函数。
初始化状态:
网上澳门金莎娱乐 14 获取焦点之后:
网上澳门金莎娱乐 15 失去焦点之后:
网上澳门金莎娱乐 16

(7)submit:当用户点击提交按钮在元素上触发。

(8)reset:当用户点击重置按钮在元素上触发。这两个事件我们一般在提交表单使用,单独拿出来以后演

示没有任何的效果,我们就不再演示。在后面相关的提交表单的博文中我们详细介绍。

(9)resize:当窗口或框架的大小变化时在window或框架上触发。

(10)scroll:当用户滚动带滚动条的元素时触发。以上两个事件使用很少,就不再举例演示。

http://www.bkjia.com/Javascript/1088108.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1088108.htmlTechArticle轻松学习JavaScript二十八:DOM编程学习之事件处理函数 在JavaScript语言中可以处理的事件类型可以分为:鼠标事件,键盘事件和HTML事件。对于...

有时候使用ios输入键盘以后,直接点击页面按钮会出现事件无效。

解决方法:

1、输入框输入后点击提交按钮后,弹窗会发现光标穿透问题

解决方法:

使用input blur()事件使input失去焦点

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:ios 键盘弹起bug,出现的问题,光标穿透,页面无法点击网上澳门金莎娱乐

关键词: