mousedown:鼠标按下才发生

mouseup:鼠标按下松开时才发生

mouseenter和mouseleave效果和mouseover mouseout效果差不多；但存在区别，区别见代码解析：

css代码：

  1. <style>
  2.             .cc,.dd{
  3.                 height: 80px;
  4.                 width: 300px;
  5.                 border: 1px solid black;
  6.             }
  7.             .ff,.ee{
  8.                 height: 200px;
  9.                 width: 300px;
  10.                 background-color: darkgrey;
  11.                 border:1px solid red;
  12.                 text-align: center;
  13.             }
  14.         </style>

html代码：

  1. <body>
  2.  
  3. 		<div class="aa">1、please press down your mouse button</div><br />
  4. 		<div class="bb">2、please press up your mouse button</div><br />
  5.  
  6. 		<div class="cc"> 
  7.  
  8. 			3、mouseenter：颜色变红
  9. 			mouseleave：颜色变灰
  10.  
  11. 		</div><br />
  12.  
  13. 		<div class="dd">
  14. 			4、mouseover：颜色变黄
  15. 			mouseout：颜色变灰
  16. 		</div><br />
  17.  
  18. 		<div class="ff"> 5、<p style="background-color: white;">mouseout事件在鼠标离开任意一个子元素及选的元素时触发</p><span></span> </div><br />
  19. 		<div class="ee"> 6、<p style="background-color: white;">mouseleave事件只在鼠标离开选取的的元素时触发。</p><span></span>  </div>
  20. 	</body>

　　

jqery代码：

  1. <script>
  2. //当鼠标按下时会显示
  3.         $(".aa").mousedown(function(){
  4.             $(this).after("<p>when mouse button press down</p>")
  5.         });
  6. //当鼠标按下松开时发生的
  7.         $(".bb").mouseup(function(){
  8.             $(this).after("<p>when mouse button press up</p>")
  9.         });
  10. //当鼠标enter/leave
  11.         $(".cc").mouseenter(function(){
  12.             $(".cc").css("background-color","red")
  13.         });
  14.          $(".cc").mouseleave(function(){
  15.             $(".cc").css("background-color","grey")
  16.         });
  17.  //当鼠标mouseover/mouseout
  18.        $(".dd").mouseover(function(){
  19.            $(".dd").css("background-color","yellow")
  20.        });
  21.        $(".dd").mouseout(function(){
  22.            $(".dd").css("background-color","grey")
  23.        });
  24.  //mouseleave 与 mouseout 的区别
  25.  x=0;
  26.  y=0;
  27.  $(".ff").mouseout(function(){
  28.      $(".ff span").text(x+=1);
  29.  })
  30.  $(".ee").mouseleave(function(){
  31.      $(".ee span").text(y+=1);
  32.  })
  33.  //mouseenter,mouseover同理
  34.  //mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
  35. //mouseenter 事件只在鼠标移动到选取的元素上时触发。
  36. </script>

jQuery中有关mouse的事件--mousedown/up/enter/leave/over/out----2017-05-10的更多相关文章

  1. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  2. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  3. jquery中怎样防止冒泡事件

    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()

  4. JQuery中的对象和事件

    一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了第二个框架)只有两类对象,即:JQuery 对象和 Dom 对象.Dom 对象指的是普 ...

  5. jquery中ajax的相关事件汇总

    Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...

  6. jQuery中四个绑定事件的区别 on,bind,live,delegate

    1.jQ操作DOM元素的绑定事件的四种方式       jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate, ...

  7. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  8. jQuery中两种阻止事件冒泡的区别

    方式一:event.stopPropagation(); 方式二:return false; 但是这两种方式是有区别的.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身.event ...

  9. jQuery 中ready与load事件

    jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...

随机推荐

  1. 使用Vue和thrift建立前后端交互的demo

    初识thrift thrift 是 facebook 于2007年开发的一款跨平台 RPC(Remote Procedure Call) 软件框架, 它可以在多种平台上进行无缝交互,数据传输使用二进制 ...

  2. (转载,但不知道谁原创)获取SPRING 代理对象的真实实例,可以反射私有方法,便于测试

    /** * 获取 目标对象 * @param proxy 代理对象 * @return * @throws Exception */ public static Object getTarget(Ob ...

  3. java执行多条SQL语句

    一次执行多条SQL的技术要点如下: DatabaseMetaData接口是描述有关数据库的整体综合信息,由于DatabaseMetaData是接口,所以没有构造方法,故不能使用new来创建Databa ...

  4. Java StringBuilder 和 StringBuffer 源码分析

    简介 StringBuilder与StringBuffer是两个常用的操作字符串的类.大家都知道,StringBuilder是线程不安全的,而StringBuffer是线程安全的.前者是JDK1.5加 ...

  5. 安装sphinx和coreseek

    sphinx简介 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.Sphinx可以非常容易的与SQL数 ...

  6. VTK显示.vtk格式文件

    void ReadandShowVTKFile () { vtkSmartPointer<vtkRenderer > aRenderer = vtkSmartPointer<vtkR ...

  7. zTree实现地市县三级级联Service接口

    zTree实现地市县三级级联Service接口 ProvinceService.java: /** * @Title:ProvinceService.java * @Package:com.gwtjs ...

  8. No bean named 'cxf' is defined

    1.错误描述  严重:Exception starting filter CXFServlet        org.springframework.beans.factory.NoSuchBeanD ...

  9. 查找IFileSourceFilter上的Pin

    创建了IFileSourceFilter,可IFileSourceFilter好像不是从IBaseFilter继承来的,没有EnumPins,那应该怎么查找IFileSourceFilter上的pin ...

  10. CentOS中配置NFS服务

    1.服务器端安装rpcbind.nfs-utils.nfs-server包 yum install nfs-utils -y 2.修改服务器端配置文件,添加需要共享的文件夹. vim /etc/exp ...