javascript - 如何使用 JavaScript/jQuery 编写 onshow 事件？

Question

我的页面上有一个 anchor 标记，我想要一个附加到它的事件，该事件将在该元素的显示更改时触发。

如何编写此事件，并在该元素的显示发生变化时捕获？

Answer 1

这是我在 onShow 上的做法，作为一个 jQuery 插件。但是，它可能会或可能不会完全执行您正在做的事情。

(function($){
  $.fn.extend({ 
    onShow: function(callback, unbind){
      return this.each(function(){
        var _this = this;
        var bindopt = (unbind==undefined)?true:unbind; 
        if($.isFunction(callback)){
          if($(_this).is(':hidden')){
            var checkVis = function(){
              if($(_this).is(':visible')){
                callback.call(_this);
                if(bindopt){
                  $('body').unbind('click keyup keydown', checkVis);
                }
              }                         
            }
            $('body').bind('click keyup keydown', checkVis);
          }
          else{
            callback.call(_this);
          }
        }
      });
    }
  });
})(jQuery);

您可以在 $(document).ready() 函数中调用它，并在元素显示时使用回调来触发，就像这样。

$(document).ready(function(){
  $('#myelement').onShow(function(){
    alert('this element is now shown');
  });
});

它的工作原理是将 click、keyup 和 keydown 事件绑定(bind)到 body 以检查元素是否显示，因为这些事件最有可能导致元素显示，并且用户执行的频率很高。这可能不是非常优雅，但可以完成工作。此外，一旦显示元素，这些事件就会与主体解除绑定(bind)，以免继续触发并降低性能。