html 鼠标单击显示div,3.1.2 利用鼠标单击实现DIV的选取

3.1.2 利用鼠标单击实现DIV的选取

有时我们不希望鼠标悬停就选取一个DIV，而是希望当鼠标对DIV进行单击时选择它。如果是这样，需要使用鼠标的单击事件来操作对DIV的选取。其中，需要使用jQuery函数ready()、click()。使用ready()函数在文档加载完成后注册DIV的鼠标单击事件，在鼠标单击事件中做出响应。

1．jQuery函数click()--鼠标单击事件

该函数触发每一个匹配元素的单击事件。其语法形式如下：click([fn])

注：这个函数会调用执行绑定到click事件的所有函数。

HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：1

2 $(function(){

3 $("#div1").click(function(){ //鼠标单击事件

4 alert("单击层被选择");

5 });

6 });

效果如图3.3所示。在jQuery中还有一个事件响应函数toggle()。它对鼠标单击的不同次数进行响应，而不仅仅是单击事件。当发生多次单击的时候，每次单击事件都可以用这个函数做处理操作，它和上面所介绍的hover()函数同属于事件切换函数。这里我们想要实现当鼠标***次单击DIV的时候选取，第二次单击DIV的时候撤销选取。

图3.3 鼠标单击选择DIV层

2．jQuery函数toggle()--单击切换

该函数表示每次单击后依次调用函数。其语法形式如下：toggle(fn1,fn2,[fn3,fn4,…])

注：如果单击了一个匹配的元素，则触发指定的***个函数，当再次单击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到***一个。随后的每次单击都重复对这几个函数的轮番调用。 1

2 $(function(){

3 $("#div1").toggle(function(){ //鼠标单击事件切换

4 alert("单击层被选择");

5 },

6 function(){

7 alert("再次单击层被反选");

8 }

9 );

10 });

在toggle()中添加了两个function()函数，***个表示鼠标***次单击层(如果后面还有多次单击，则它表示奇数次单击)。第二个表示鼠标第二次单击层(它表示偶数次单击)。***次单击效果如图3.3所示，第二次单击效果如图3.4所示。

图3.4 再次单击取消DIV的选择

【责任编辑：book TEL：(010)68476606】

html 鼠标单击显示div,3.1.2 利用鼠标单击实现DIV的选取相关推荐

html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
php单击显示对应内容,关于php：如何单击此“提交”按钮，并使其显示原始查询中的数据，而不是清除它并进入空白页？...
我正在运行这段代码.它显示一个问题和可能的答案.当我单击提交按钮时.转到空白页. 我收到错误"未定义的索引计数"和"未定义的索引主题".因此,这告诉我它再次运行 ...
php实现鼠标悬停显示下拉菜单,Html中鼠标悬停显示二级菜单的两种方法
Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退 ...
DIV层跟随鼠标位置显示提示
虽然IE也带提示功能,只要给title属性赋值,如下代码 <a href="http://chenxp2032.blog.163.com/blog/#" title=&quo ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
实现div在固定区域跟随鼠标移动点击拖动而产生的变化
一.思路 1.在外层增加一个 DIV 容器,并设置好容器的大小.(即:宽和高) 当容器存在边框的时候,由于这里还没找到获取的方法,所以,在容器边框大于 0 的时候,获得的容器的限制区域的坐标会有误差. ...
Axure实现提示文本单击显示后自动消失的效果
Axure实现提示文本单击显示后自动消失的效果方法/步骤如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. 首先在 ...
（转）Arcgis for Js之鼠标经过显示对象名的实现
http://blog.csdn.net/gisshixisheng/article/details/41889345 在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来 ...
jQuery学习(一)：鼠标移动显示大图
鼠标移动,显示大图,在不少网站上都有这种需要,特别是Zol.360buy.Taobao等.平时显示缩略图,在用户需要查看细节的时候,才显示与此图形匹配的大图.使用jQuery实现非常方便.即先显示小图 ...
ROI区域提取（图上直接利用鼠标事件提取坐标点，可视化显示）
下面是ROI区域坐标提取代码讲解,这段代码利用鼠标事件可以在照片上或者是视频中截取的某帧图像上的图片进行划分. import cv2 import numpy as np import joblibp ...

html 鼠标单击显示div,3.1.2 利用鼠标单击实现DIV的选取

html 鼠标单击显示div,3.1.2 利用鼠标单击实现DIV的选取相关推荐

最新文章

热门文章