当一个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事件无法触发的更多相关文章

  1. 向第一个 p 元素添加一个类

    This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> &l ...

  2. add() 方法用于向 <select> 添加一个 <option> 元素。

    //add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...

  3. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  4. 一个DOM元素绑定多个事件时，先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  5. 如何居中div？如何居中一个浮动元素？

    如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...

  6. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  7. 【特效】给元素循环添加class

    经常会遇到给元素循环添加class的效果,例如下面这个图 每个模块的背景色和图标都不相同,但是呢,模块的数量又不确定,说不定有几十个,那我不能设计几十个图标吧,所以,可以做成每9个一循环,也就是第10 ...

  8. javascript数组元素的添加、删除与插入以及参数数组的使用

    1.数组元素的添加 push方法在数组的尾部添加元素: var colorArray=new Array(); colorArray.push('red','black','yellow'); //这 ...

  9. js中数组元素的添加和删除

    js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1)直接添加通常都是这样 va ...

随机推荐

  1. laravel 微信小程序登录 加密解密扩展包

    https://github.com/lanceWan/wxxcx 测试的时候一定要保证服务器的 appid  和客户端的appid一致 如果是切换测试 那么需要把本地的项目从微信小程序上面删除掉 再 ...

  2. Oracle获取当前年、月、日的方法

    Oracle获取当前年.月.日的方法 Oracle 获取当前年.月.日 1.//oracle中extract()函数从oracle 9i中引入,用于从一个date或者interval类型中截取到特定的 ...

  3. VSTO：使用C#开发Excel、Word【17】

    使用Range对象Range对象表示电子表格中的单元格范围.范围可以包含一个单元格,多个连续的单元格,甚至多个不连续的单元格.您可以在Excel中选择时按住Ctrl键选择多个不连续的单元格. 获取特定 ...

  4. eclipse工具类及插件（svn的安装）

    (摘抄原文)https://blog.csdn.net/nzzl54/article/details/80768838

  5. python非技术性问题整理

    针对软件安装包,安装时出现下类问题, 解决方法时, 以管理员身份运行命令行, 可以看到,包 正常安装. 在使用bs4,分析html或者xml文档时, 代码无法识别lxml 指令, 可能是python ...

  6. Problem B: 平面上的点和线——Point类、Line类 (II)

    Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定,两点确定一条线段.现在我们封装一个“Point类”和“Line类”来实现平面上的点的操作. 根据“append ...

  7. python自学第9天，装饰器

    装饰器:本质是函数(装饰其它函数) 就是为其它函数添加附加功能 原则:1.不能修改被装饰函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数即变量 2.高阶函数:a.把一个 ...

  8. VBA消息框

    MsgBox函数显示一个消息框,并等待用户点击一个按钮,然后根据用户点击该按钮的动作执行. 语法 MsgBox(prompt[,buttons][,title][,helpfile,context]) ...

  9. locate语法

    1.命令格式:locate [参数] [文件] 2.命令功能:locate命令可以在搜寻数据库时快速找到档案,数据库由updatedb程序来更新,updatedb是由cron daemon周期性建立的 ...

  10. Java学习笔记36（jdbc快速入门）

    JDBC: Java DataBase Connectivity 是java程序连接存取数据库的应用程序接口 (是sun公司的程序员定义的一套操作数据库的规则,然后下面的各个公司如:mysql,sql ...