2013-12-11 180 views
2

任何人都可以帮助我,我有一个脚本在你的鼠标离开页面时显示一个对话框,但我只希望它在第一次之后执行一次,我不希望它再次发生。 这里我的代码:只执行一次jquery

<html> 
<head> 
<style> 
#dialog { 
    width:652px; 
    margin-right:auto; 
    margin-left:auto; 
    display:none; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 

function show_image(src, width, height, alt) { 
    var img = document.createElement("img"); 
    img.src = src; 
    img.width = width; 
    img.height = height; 
    img.alt = alt; 

    // This next line will just add it to the <body> tag 
    document.body.appendChild(img); 
} 

</script> 
<script type="text/javascript"> 
var count = 0; 
function addEvent(obj, evt, fn) { 
    if (obj.addEventListener) { 
     obj.addEventListener(evt, fn, false); 
    } 
    else if (obj.attachEvent) { 
     obj.attachEvent("on" + evt, fn); 
    } 
} 
addEvent(window,"load",function(e) { 
    addEvent(document, "mouseout", function(e) { 
     e = e ? e : window.event; 
     var from = e.relatedTarget || e.toElement; 
     if (!from || from.nodeName == "HTML") { 
      // stop your drag event here 
      // for now we can just use an alert 
      if (count < 1) { 
       $(function() { 
       var count = 1; 
       $("#dialog").dialog({ 
       width:692 
       }); 
       }); 
      } 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="dialog"> 
<img src="http://www.maxcashtitleloans.com/POPUPIMAGE.jpg"> 
</div> 
</body> 
</html> 

任何帮助将是巨大的!谢谢。

+3

更改您的代码使用jQuery的事件处理,并使用'。一()'函数来执行的处理程序只有一次。看起来你也可以简单地在全局范围内声明'count',而不是在事件处理程序中声明。 –

+0

我不能找出处理鼠标事件的jquery – user1789437

+0

您的代码没有引用jQueryUI样式表。这对你的问题并不重要,但稍后可能很重要(没有它,你的对话将无法工作)。查看[这个答案]的最后部分(http://stackoverflow.com/questions/20507851/do-something-different-depending-on-what-the-user-clicks-on/20507989#20507989)为例。 – gibberish

回答

4

您需要有count = 1;

而不是var count = 1;(〜47行)

count = 0;代替var count = 0;(第29行)

线29(var count = 0;)定义变量“计数”,而计数不能被重写或在代码增加,因为它不是在相同的范围。

0

你有两个选择:

1_Unbind事件做这个(你需要使用这个jQuery的事件)

$(this).unbind("mouseOut"); 

2_Do它的糟糕方式和使用标志这样

var flag=1; 
addEvent(window,"load",function(e) { 
    addEvent(document, "mouseout", function(e) { 
     if(flag){ 
      flag=0; 
      e = e ? e : window.event; 
      var from = e.relatedTarget || e.toElement; 
      if (!from || from.nodeName == "HTML") { 
       // stop your drag event here 
       // for now we can just use an alert 
       if (count < 1) { 
        $(function() { 
         var count = 1; 
         $("#dialog").dialog({ 
          width:692 
         }); 
        }); 
       } 
      } 
     } 
    }); 
}); 
+0

unbind()仅适用于jQuery处理程序 –

+0

My bad!,更新了答案 – Fibonacci

1

复制/粘贴此代码,看看TI为你的作品:

<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 

     <style> 
      #dialog { 
       width:652px; 
       margin-right:auto; 
       margin-left:auto; 
       display:none; 
      } 
     </style> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       var count = 0; 

       function show_image(src, width, height, alt) { 
        var img = document.createElement("img"); 
        img.src = src; 
        img.width = width; 
        img.height = height; 
        img.alt = alt; 

        // This next line will just add it to the <body> tag 
        document.body.appendChild(img); 
       } 
       function addEvent(obj, evt, fn) { 
        if (obj.addEventListener) { 
         obj.addEventListener(evt, fn, false); 
        } 
        else if (obj.attachEvent) { 
         obj.attachEvent("on" + evt, fn); 
        } 
       } 
       addEvent(window,"load",function(e) { 
        addEvent(document, "mouseout", function(e) { 
         e = e ? e : window.event; 
         var from = e.relatedTarget || e.toElement; 
         if (!from || from.nodeName == "HTML") { 
          // stop your drag event here 
          // for now we can just use an alert 
          if (count < 1) { 
           $(function() { 
            count = 1; 
            $("#dialog").dialog({ 
             width:692 
            }); 
           }); 
          } 
         } 
        }); 
       }); 

      }); //END $(document).ready() 

     </script> 
    </head> 
<body> 

    <div id="dialog"> 
     <img src="http://www.maxcashtitleloans.com/POPUPIMAGE.jpg"> 
    </div> 

</body> 
</html>