如何使mouseover事件不重复执行

༺ཌༀཉི浮华背后༃ༀད༻ 2012-03-31 10:00:43 


<html>

<head>

<title></title>

<script src="jquery_1.4.2.js"></script>

</head>

<body>

<div id="mapbox" style="float:left;position:relative;overflow:hidden;width:1200px;z-index:1;">

<img id="pic" width="1200px" height="1973px" style="position:relative;z-index:-1;" src="images/all.png" />

</div>

<script>

$(function(){

var being=true;

	var lx=645;

	var ly=-870;

	var title0= "西城区";

	var text0 = "时间： 2012-03-24 19:20:13<br>设备名称： 0016EC12428";

	//alert("lx-->>"+lx);

	//$("#mapbox").append("<div style='position:relative;top:"+ly+";left:"+lx+";'>。</div>");

	$("#mapbox").append("<div style='position:relative;top:"+(ly-10)+";left:"+(lx-13)+";'><img id='img0' src='images/mark.png' /></div>");//在图片显示用户输入的信息

	$("#img0").mouseover(function(){

		if(being == false) return;

		being = true;

		//添加提示框

				$("#mapbox").append("<div id='img00' style='border:solid 1px;"+

				"width=300;height:150;padding:10px;margin:0; position:relative;z-index:-1;"+

				"top:"+(ly-131)+";left:"+(lx-23+0)+";'>"+title0+

				"<button style='position:relative;top:-2px;'"+

				"name='close' value='关闭' id='3d00' onclick='being=true;$(\"#img00\").remove();' />"+

				"<br>"+text0+"</div>");

	});

	/*

	$("#img0").mouseout(function(){

		if($("#img00"))

			$("#img00").remove();

	});

	*/

	$("#img0").click(function(){

		alert("0 - turn to 3d map");

	});





	var lxs=423;

	var lys=-1519;



	$("#mapbox").append("<div style='position:relative;top:"+(lys-10)+";left:"+(lxs-13)+";'><img id='img1' src='images/mark.png' /></div>");//在图片显示用户输入的信息

	$("#img1").mouseover(function(){

		if(being == false) return;

		being = true;

		//添加提示框

				$("#mapbox").append("<div id='img00' style='border:solid 1px;"+

				"width=300;height:150;padding:10px;margin:0; position:relative;z-index:-1;"+

				"top:"+(lys-131)+";left:"+(lxs-23+0)+";'>"+title0+

				"<button style='width:17px;height:17px;position:relative;top:-2px;'"+

				"name='close' value='关闭' id='3d00' onclick='being=true;$(\"#img00\").remove();' />"+

				"<br>"+text0+"</div>");

	});

	/*

	$("#img1").mouseout(function(){

		if($("#img11"))

			$("#img11").remove();

	});

	*/

	$("#img1").click(function(){

		alert("1 - turn to 3d map");

	});

});

</script>

</body>



</html>
...全文
335 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
༺ཌༀཉི浮华背后༃ༀད༻ 2012-03-31
  • 打赏
  • 举报
 回复
#9方法我试过了，第二次不能运行。
#11的方法可行，赞~\(≧▽≦)/~
三石-gary 2012-03-31
  • 打赏
  • 举报
 回复 
 $("#img0").mouseover(function () {



                if (being == true) {

                    //添加提示框

                    $("#mapbox").append("<div id='img00' style='border:solid 1px;" +

                "width=300;height:150;padding:10px;margin:0; position:relative;z-index:-1;" +

                "top:" + (ly - 131) + ";left:" + (lx - 23 + 0) + ";'>" + title0 +

               "<button style='width:17px;height:17px;position:relative;top:-2px;'" +

                "name='close' value='关闭' id='3d00' />" +

                "<br>" + text0 + "</div>");





                }

                being = false;

            });



            $('#3d00').live("click",function () {

                alert('aa');

            being=true;

            $("#img00").remove();

            

            });

这样应该就是你想要的结果
三石-gary 2012-03-31
  • 打赏
  • 举报
 回复
onclick='being=true;$(\"#img00\").remove();'
我试了下。。你这个事件没有触发啊
还在加载中灬 2012-03-31
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 的回复:]

如果，你想第二次还可以运行

你就在mouseover里加上楼上的判断

或者

在第一次运行后

把being的值改为false
[/Quote]
我说错了

//初值
being=false;

你的判断改为
if(being == true) return;

//然后
being=true;
还在加载中灬 2012-03-31
  • 打赏
  • 举报
 回复
如果，你想第二次还可以运行

你就在mouseover里加上楼上的判断

或者

在第一次运行后

把being的值改为false
三石-gary 2012-03-31
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]

这样只能执行一次mouseover事件，在点击按钮关闭后，第二次就不能运行了。尽管being的值已经改为true。
[/Quote]
点击事件那把那个设为TURE。。
Acesidonu 2012-03-31
  • 打赏
  • 举报
 回复
if (!document.getElementById('img00'))
先判断再添加
༺ཌༀཉི浮华背后༃ༀད༻ 2012-03-31
  • 打赏
  • 举报
 回复
这样只能执行一次mouseover事件，在点击按钮关闭后，第二次就不能运行了。尽管being的值已经改为true。
三石-gary 2012-03-31
  • 打赏
  • 举报
 回复 
$("#img0").mouseover(function () {

                

                if (being == true) {

                    //添加提示框

                    $("#mapbox").append("<div id='img00' style='border:solid 1px;" +

                "width=300;height:150;padding:10px;margin:0; position:relative;z-index:-1;" +

                "top:" + (ly - 131) + ";left:" + (lx - 23 + 0) + ";'>" + title0 +

                "<button style='position:relative;top:-2px;'" +

                "name='close' value='关闭' id='3d00' onclick='being=true;$(\"#img00\").remove();' />" +

                "<br>" + text0 + "</div>");

                    



                }

                being = false;

            });

这样应该就能满足你的要求。。。。
三石-gary 2012-03-31
  • 打赏
  • 举报
 回复
$("#img11").unbind('mouseover')
试试
༺ཌༀཉི浮华背后༃ༀད༻ 2012-03-31
  • 打赏
  • 举报
 回复
注销？是指：var being=true;改为var being;吗？我试了，不行的。
还在加载中灬 2012-03-31
  • 打赏
  • 举报
 回复
第一次运行时，就把它注销掉就可以了
jquery防止重复执行动画避免页面混乱
最近开发前台页面的时候遇到一个问题。juery时候mouseover……或者其他事件，发现鼠标滑动过快导致动画重复执行，以至于页面乱了。 解决办法： 可以先判断一下元素是否处于动画中。 如： 代码如下: if(!$(“.content”).is(“:animated”)){ //元素不处于动画中执行。 }
javascript高级教程
javascript高级教程　1、运算符 　　运算符就是完成操和的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=）、算术运算符(+,-,*,/,++,--)、比较运算符(>,<,<=,>=,==,===,!=)、逻辑运算符(||,&&,!)、条件运算(?:)、位移运算符(|,&)和字符串运算符。 　　可能很多人不知道"==="什么。 　　在这里，我为大家解释一下，在javascript中 "==="才是全等 只有"==="两边的内存地址也相等 才会返回真 　　而"=="只是值相等就会返回真 　　例如：null==undefined 会返回真 , 但是null===undefined 就会返回假！ 　　2、表达式 　　运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。 　　3、语句 　　Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是： 　　赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语句、continue循环中断语句、with语句、try...catch语句、 　　if语句（if..else，if...else if ...）。 　　4、函数 　　函数是命名的语句段，这个语句段可以被当作一个整体来引用不着和执行。使用函数要注意以下几点： 　　1）函数由关键字function定义； 　　2）函数必须先定义后使用，否则将出错； 　　3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名； 　　4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量； 　　5）return语句用于返回表达式的值，也可以没有。 　　一般的函数都是以下格式： 　　function myFunction(params){ 　　//执行的语句 　　} 　　函数表达式： 　　var myFunction=function(params){ 　　//执行的语句 　　} 　　匿名函数，它常作为参数在其他函数间传递： 　　window.addEventListener('load',function(){ 　　//执行的语句 　　},false); 　　5、对象 　　Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 　　一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。 　　6、事件 　　用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。绝大部分事都由用户的动作所引发，如：用户按鼠标的按钮，就产生click事件，若鼠标的指针的链接上移动，就产生mouseover事件等等。在Javascript中，事件往往与事件处理程序配套使用。 　　而对事件的处理，W3C的方法是用addEventListener()函数，它有三个参数：事件，引发的函数，是否使用事件捕捉。为了安全性，建议将第三个参数始终设置为false； 　　MSIE的方法就是定义元素的on...事件，它就是W3C的方法中的事件参数前加一个“on”。学习Javascript比较快速有效的方法是先熟悉一些基本概念，然后找几个别人设计好的程序认真仔细地分析一遍，再稍作改动，再看看能否达到预期目的，不断地举一反三，既可以加深对一些参数、设计方法的理解，又可以快速地提高自己的水平。另外，再提醒一下：Javascript对大小写是敏感的，特别是一些对象、方法、属性的大小写一定要一致，要养成一种良好的习惯，否则在调试程序时可要累死你了。 　　7、变量 　　如 var myVariable = "some value"; 　　变量有它的类型，上例中myVariable的类型为string（字符串） 　　javascript支持的常用类型还有： 　　number：数（包括浮点数）； 　　boolean：布尔值，只有true和false两个值，是所有类型中占用内存最少的； 　　null：一个空值，唯一的值是null； 　　undefined：没有定义和赋值的变量 　　实际上javascript的变量是弱变量类型，你赋值给他的是字符串，他就是String . 　　是数字他就是整形。是true和false他就是boolean型（注意，不能加引号，不然会被当成字符串处理）。
关于mouseover/mouseout事件重复触发的问题
  在用到mouseover和mouseout事件来作为事件触发的条件，但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件。因为内部元素在鼠标移上的时候会向它的父对象派发事件，所以外面元素相当于也触发了mouseover 事件。   为了阻止mouseover和mouseout的反复触发，这里要用到event对象的一个属性relatedTarget，这个属性就是用来判断mouseover和mouseout事件目标节点的相关节点的属性。简单的.
消除mouseover或mouseout重复触发事件
通常会在商品的展示图，设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时，会触发一些时间，出现商品信息框或则商品图片发生变化，当鼠标离开商品图片时，图片恢复原状。最近在做类似的事情，由于不能使用就Query，（不能用jQuery，我也很无奈。。）于是自己写了原生的JS来实现一些mouseover和mouseout事件，但是，测试时发现了一些问题。 商品的展示图的HTM代码如下所示：
重复绑定mouseover和mouseout事件
鼠标悬浮日期上显示日程数量        我需要实现鼠标悬浮在日期显示提示信息，提示信息用了layer插件，提示信息内容是新建的日程数量，效果图如下：     鼠标放在17号显示了当前日期新建了19条日程记录，这里需要在初始化日历的时候，为有日程记录的日期绑定事件，重复绑定的时候，显示的提示信息是不一样的。代码如下： myCals: funct
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章