Question

 var action = 'click';
 if (action == 'click') {
      $('#element').on(action, function() {
           // do something...
      })
 } else if (action == 'mouseenter') {
      $('#element').on(action, function() {
           // do something completely different...
      })
 }

每当action发生变化时，事件就会根据旧动作而消失;它不会动态变化。我也尝试过：

 $('#element').on(action, function() {
      if (action == 'click') {
           // do something...
      } else if (action == 'mouseenter') {
           // do something else...
      }
 });

对于smart snowflakes：我需要根据action的不同而不同地处理一个元素。 action本身可由客户改变。

编辑＃2：我不会尝试使用不同的结果，具体取决于元素上使用的事件。如果客户选择“播放模式”，则操作设置为mouseenter，在这种情况下，＃element不应该是可点击的*，只能在悬停时运行！

Answer 1

您可以通过这种方式拥有多个活动。然后根据e.type的值使用if else语句。

$('#element').on('click mouseover mouseout',function(e){
    console.log(e.type)
    if(e.type == 'click')
          //handle click
    else if(e.type == 'mouseover')
          //handle mouseover
     ...
})

编辑：jsFiddle。 https://jsfiddle.net/pe8awhyL/2/

HTML

<button id="click">
click
</button>
<button id="mouseover">
mouseover
</button>
<button id="mouseout">
mouseout
</button>

JS：只要＆＃39;动作＆＃39;听众逻辑就会起作用。被设定为可识别的事件。

var action = 'click';

$('div').on('click mouseover mouseout',function(e){
    if(e.type == action)
      //The event is equal to the expected action, handle accordingly
})

$('button').on('click',function(){
    action = $(this).attr('id');
})

Answer 2

您可以查看bind()和unbind()作为动态更改功能的方法。我肯定会考虑为他们添加名称空间以便更好地跟踪。 https://api.jquery.com/unbind/

我已经在下面列出了jquery示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unbind demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
 
<script>
function aClick() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
});
</script>
 
</body>
</html>

Answer 3

您可以尝试以下方式：

<div id="element">
    Click
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <button id="click">
    Activate Click Event
    </button>
    <button id="mouseenter">
    Activate mouseEnter Event
    </button>


<script>


  $("button").click(function()
 {
   var action = this.id; // you may use any other criteria to match this up
   $('#element').off();  // removes all delegated events
   if (action == 'click') 
   {
        $('#element').on(action, function() {
           alert('click invoked');
        });
   } else if (action == 'mouseenter') {       
         $('#element').on(action, function() {
         alert('mouseenter invoked');
       });
   }
 });
</script>

示例：https://jsfiddle.net/DinoMyte/98nnvjqm/2/

Answer 4

您面临的是预期的行为。因为，您只在每张支票上注册背靠背事件。首先，它会注册click事件。一旦操作更改为mouseenter，它将注册mouseenter事件（我假设您将在操作更改后触发该代码）

您需要做的是在注册新元素之前删除现有事件。您可以在文档中详细了解connect。你甚至可以在上面的链接中找到一些有用的例子

即

function actionChanged() {
    if(action == "mouseenter") {
        $( "body" ).off( "click", "#element", clickFunction );
        $( "body" ).on( "mouseenter", "#element", mouseEnterFunction );
    } else if (action == 'click') {
        $( "body" ).off( "mouseenter", "#element", mouseEnterFunction );
        $( "body" ).on( "click", "#element", clickFunction );
    }
}

jQuery不允许动态事件监听器

4 个答案: