0

我建立了一个需要用户登录的网站。现在我决定在不登录的情况下提供内容，但有些操作需要用户先登录。该网站严重依赖 Javascript。如果用户单击某个按钮，应弹出登录表单。

我打算做的是附加带有所需按钮的单击事件，以检查用户是否已登录。以前的代码：

 $('body').on('click','.editRating',function(){
      // code to edit        
      return false;
   })

这是我正在计划的。将另一个事件处理程序附加到所需的按钮以检查登录。

 $('body').on('click','.editRating',function(){
      if user is not loggedIn{
           popup loginForm
           return false
       }        
 })
  $('body').on('click','.editRating',function(){
      // code to edit        
      return false;
   })

那么这是否保证事件处理程序以与定义相同的顺序执行？是否有更清洁、更安全的方式来实现目标？

4

1 回答 1

1

您可以将它们全部放在一个事件处理程序中：

$('body').on('click','.editRating',function(){
    if user is not loggedIn{
        popup loginForm
        return false
    }        

    // code to edit        
    return false;
})

如果这不起作用，那么您可以利用事件处理中的捕获阶段与冒泡阶段来确保您获得所需的订单。我相信 jQuery 只做冒泡阶段（当然，如果我错了，我欢迎更正）。所以你将不得不放弃 jQuery 的on()东西，转而使用通用的 JavaScriptaddEventHandler()东西。

（注意这addEventListener()不在 IE 8 或更早版本中，因此如果您需要支持这些浏览器，则需要检查addEventListener()，如果不存在，attachEvent()请改用。请参阅相关的 MDN 文档。）

http://jsfiddle.net/WdtsL/展示了你可以如何做到这一点（减去刚才提到的 IE 8 支持）。祖先元素捕获阶段处理程序都在子元素气泡阶段处理程序之前触发。因此，您可以将检查登录的单击事件处理程序放在body标记或任何外部容器上的捕获阶段。然后各个按钮可以在冒泡阶段正常处理点击。

示例 HTML：

<body id="myBody">
<div id="myDiv">
    Click me!
</div>
</body>​

对应的 JavaScript 示例：

var myBody = document.getElementById('myBody');
var myDiv = document.getElementById('myDiv');

myDiv.addEventListener('click', function() { alert("Bubbling phase!"); }, false);
myBody.addEventListener('click', function() { alert("Capture phase!"); }, true);
myBody.addEventListener('click', function() { alert("Also a capture phase!"); }, true);
myDiv.addEventListener('click', function() { alert("Oh, hey, I'm bubbling phase!"); }, false);​
于 2012-07-04T14:41:55.133 回答