javascript - 停止 anchor 元素重新加载和/或滚动到顶部

Question

当有人点击#collapseOne anchor 时，页面会重新加载并滚动到顶部。我需要禁用它。但是，我无法将 href 更改为其他任何内容，因为它用于网站的功能。有什么方法可以阻止网站滚动到顶部或根本阻止网站重新加载？

  <div class="accordion" id="accordion2">
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    Collapsible Group Item #1
  </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">
    Anim pariatur cliche...
  </div>
   </div>
 </div>
 <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
    Collapsible Group Item #2
  </a>
 </div>
 </div>

这是 JavaScript。这是 Twitter Bootstrap。

!function ($) {

"use strict"; // jshint ;_;


/* COLLAPSE PUBLIC CLASS DEFINITION
 * ================================ */

var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)

if (this.options.parent) {
  this.$parent = $(this.options.parent)
}

this.options.toggle && this.toggle()
}

Collapse.prototype = {

constructor: Collapse

, dimension: function () {
  var hasWidth = this.$element.hasClass('width')
  return hasWidth ? 'width' : 'height'
}

, show: function () {
  var dimension
    , scroll
    , actives
    , hasData

  if (this.transitioning || this.$element.hasClass('in')) return

  dimension = this.dimension()
  scroll = $.camelCase(['scroll', dimension].join('-'))
  actives = this.$parent && this.$parent.find('> .accordion-group > .in')

  if (actives && actives.length) {
    hasData = actives.data('collapse')
    if (hasData && hasData.transitioning) return
    actives.collapse('hide')
    hasData || actives.data('collapse', null)
  }

  this.$element[dimension](0)
  this.transition('addClass', $.Event('show'), 'shown')
  $.support.transition && this.$element[dimension](this.$element[0][scroll])
 }

, hide: function () {
  var dimension
  if (this.transitioning || !this.$element.hasClass('in')) return
  dimension = this.dimension()
  this.reset(this.$element[dimension]())
  this.transition('removeClass', $.Event('hide'), 'hidden')
  this.$element[dimension](0)
}

, reset: function (size) {
  var dimension = this.dimension()

  this.$element
    .removeClass('collapse')
    [dimension](size || 'auto')
    [0].offsetWidth

  this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')

  return this
}

, transition: function (method, startEvent, completeEvent) {
  var that = this
    , complete = function () {
        if (startEvent.type == 'show') that.reset()
        that.transitioning = 0
        that.$element.trigger(completeEvent)
      }

  this.$element.trigger(startEvent)

  if (startEvent.isDefaultPrevented()) return

  this.transitioning = 1

  this.$element[method]('in')

  $.support.transition && this.$element.hasClass('collapse') ?
    this.$element.one($.support.transition.end, complete) :
    complete()
}

, toggle: function () {
  this[this.$element.hasClass('in') ? 'hide' : 'show']()
}

}


/* COLLAPSE PLUGIN DEFINITION
* ========================== */

var old = $.fn.collapse

$.fn.collapse = function (option) {
return this.each(function () {
  var $this = $(this)
    , data = $this.data('collapse')
    , options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
  if (!data) $this.data('collapse', (data = new Collapse(this, options)))
  if (typeof option == 'string') data[option]()
})
}

$.fn.collapse.defaults = {
toggle: true
}

$.fn.collapse.Constructor = Collapse


/* COLLAPSE NO CONFLICT
* ==================== */

$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}


/* COLLAPSE DATA-API
* ================= */

$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
  , target = $this.attr('data-target')
    || e.preventDefault()
    || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  , option = $(target).data('collapse') ? 'toggle' : $this.data()
$this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
$(target).collapse(option)
})

}(window.jQuery);

Answer 1

$('a.accordion-toggle').on('click', function(e) {
    // whatever other code this click event needs to run here...
    e.preventDefault();
}

e 是事件对象，调用 preventDefault 方法会阻止它的正常行为(在本例中重新加载页面并重置滚动位置)。您可能需要将它与您现有的点击处理代码结合起来才能正常工作(显然您没有提供所有代码)。

return false 也类似于 e.preventDefault() (实际上它只是运行 e.preventDefault 和 e. stopPropagation 阻止点击事件传播到 DOM 中的父元素)。