bootstrap插件的写法疑问(2)。

发布于 2022-09-01 06:45:53 字数 344 浏览 10 评论 0

第一个以为是这个,http://segmentfault.com/q/1010000002714397,有懂的同学帮我解答一下。
第二个疑问是:

$parent.trigger(e = $.Event('close.bs.alert'))

if (e.isDefaultPrevented()) return

这是什么写法,为什么这么写,直接写$parent.trigger('close.bs.alert')不就好了吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

↙温凉少女 2022-09-08 06:45:53

我看了一下,这一段是bootstrap中alert插件的代码。
其作用是当用户点击叉时触发close事件,并且在允许的情况下将提示框消除。
下面是源码分析

    Alert.prototype.close = function (e) {
    // 用jquery包装被点击的dom元素
    var $this    = $(this)
    // 获取当前元素所指定的目标,也就是希望关闭的对象
    var selector = $this.attr('data-target')
    // 如果没有用data-target指定,则则尝试从href属性中取
    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }
    // 根据上面取得的选择器取得对应的jquery对象
    var $parent = $(selector)
    //阻止click的默认事件
    if (e) e.preventDefault()
    //如果上面没能取到有效的元素,则选择第一个class含alert的祖先
    if (!$parent.length) {
      $parent = $this.closest('.alert')
    }

    // 新建一个'close.bs.alert'事件,并用该事件触发上面所选到的jquery对象
    $parent.trigger(e = $.Event('close.bs.alert'))
    // 如果开发者利用preventDefault阻止了该事件的默认方法则return结束,否则继续执行
    // 注意:此处的e是新建的'close.bs.alert'事件,与上面被阻止默认的click事件无关
    if (e.isDefaultPrevented()) return

    // 下面的是动画相关,基本上就是把指定的对象渐隐掉,这块不懂,就不细说了
    // 另外,如果设置了阻止默认,在前面一句return了下面不执行。那么alert就会不消失。
    $parent.removeClass('in')

    function removeElement() {
      // detach from parent, fire event then clean up data
      $parent.detach().trigger('closed.bs.alert').remove()
    }

    $.support.transition && $parent.hasClass('fade') ?
      $parent
        .one('bsTransitionEnd', removeElement)
        .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
      removeElement()
  }

补充一下,上面那段代码前面还有以下这几句。其实就是通过委托,将当前alert下的所有'data-dismiss'属性为'alert'的对象绑上click事件,点击后触发上面的方法。

  var dismiss = '[data-dismiss="alert"]'
  var Alert   = function (el) {
    $(el).on('click', dismiss, this.close)
  }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文