当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发
当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发
针对上述问题，我遇到的有两种情况：
情况一：已经存在的HTML元素绑定事件，可以使用下面这种绑定方式
$("button").mouseon(function(){
$("p").text("滑入");
}).click(function(){
$("p").text("点击");
});
或者：
$("button").mouseout(function(){
$("p").text("滑出");
}).click(function(){
$("p").text("点击");
});
或者：
$("button").hover(function(){
$("p").text("滑过");
}).click(function(){
$("p").text("点击");
});
情况二：未来存在的要素绑定事件，可以使用下面这种绑定方式
$("button").live("hover click",function(event){
$("span").text(event.type);
if(event.type=="mouseenter"){
$("p").text("滑进");
}
if(event.type=="mouseleave"){
$("p").text("滑出");
}
if(event.type=="click"){
$("p").text("点击");
}
});
下面是完整的测试代码：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").live("hover click",function(event){
$("span").text(event.type);
if(event.type=="mouseenter"){
$("p").text("滑进");
}
if(event.type=="mouseleave"){
$("p").text("滑出");
}
if(event.type=="click"){
$("p").text("点击");
}
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<span>显示触发的事件。</span>
<button>请点击这里</button>
</body>
</html>
当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发的更多相关文章
- 向第一个 p 元素添加一个类
This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> &l ...
- add() 方法用于向 <select> 添加一个 <option> 元素。
//add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- 一个DOM元素绑定多个事件时，先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
- 如何居中div？如何居中一个浮动元素？
如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...
- 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- 【特效】给元素循环添加class
经常会遇到给元素循环添加class的效果,例如下面这个图 每个模块的背景色和图标都不相同,但是呢,模块的数量又不确定,说不定有几十个,那我不能设计几十个图标吧,所以,可以做成每9个一循环,也就是第10 ...
- javascript数组元素的添加、删除与插入以及参数数组的使用
1.数组元素的添加 push方法在数组的尾部添加元素: var colorArray=new Array(); colorArray.push('red','black','yellow'); //这 ...
- js中数组元素的添加和删除
js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1)直接添加通常都是这样 va ...
随机推荐
- easyui 如何为标签动态追加属性实现渲染效果
简述一下在项目遇到的问题,这边有一个需求,选择不同类型,加载不同的div标签(其中属性是否必填是区分类型的关键) html界面是这样的 <div class="grid_1 lbl&q ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践：Example1.1 A map with single layer
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.1 A map with single layer 一.前言 开始MapServer用 ...
- UVa LA 4254 - Processor 二分，贪心 难度: 1
题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...
- My IELTS result has come out 我的雅思成绩出来了
Thanks to god, I finally get a score of 6.5, although my socres of listening and writing are only ...
- aps.net国际化本地资源 .resources”正确嵌入或链接到程序集
asp.net国际化提供了资源文件的解决的方式, asp.net自带的两个项目文件夹 分别是:App_GlobalResources和App_LocalResources, App_GlobalRes ...
- 自动化测试-3.selenium8种常用元素定位
自动化只要掌握四步操作:获取元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇主要讲如何用firefox辅助工具进行元素定位. 元素定位在这四个环节中是至关重要 ...
- Shiro 整合SpringMVC 并实现权限管理，登录和注销
Shiro 整合SpringMVC 并且实现权限管理,登录和注销 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring S ...
- Linux系统下用find命令查找最近修改过的文件
1.先进入指定目录,比如:cd /var/ftp/ss 2.输入指定命令,相关命令如下介绍: 最近24小时内修改过的文件 find ./ -mtime 0 前48~24小时修改过的文件 find ./ ...
- Unity用GUI绘制Debug/print窗口/控制台-打包后测试
Unity游戏视窗控制台输出 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...
- linux基础之LSB定义的常用目录详解
Linux基础之LSB定义的基本目录详解 1.LSB中FHS(Filesystem Hierarchy Standard)定义的一些文件 /boot:主要是存放引导文件的目录,比如内核文件(vmlin ...