javascript - 当鼠标移回处理程序元素时防止滑动事件

Question

当用户将光标移回处理程序元素时，我想阻止/停止滑动功能。

例如，如果您将鼠标悬停在 Home 上，.tab-pane 将会向下滑动，如果您将鼠标从 .tab-pane 移开到 Home 选项卡，它将重新向下滑动内容。我需要检测鼠标是否来自关联的 .tab-pane ，什么也不做。

$('a[data-toggle="tab"]').hover(
  function(e) {
    $(this).parent().addClass('active');
    var target = $(this).data("target");
    $($(e.target).attr('href')).slideDown('slow');
  },
  function(e) {
    $(this).parent().removeClass('active');
    var target = $(this).data("target");

    var targetId = target.replace('#', '');
    var relatedTarget = $(e.relatedTarget);

    if (relatedTarget.attr('id') === targetId) {
      return;
    }

    $($(e.target).attr('href')).hide();
  }
);

$('.tab-pane').hover(function(e) {}, function() {
  $(this).slideUp('slow');
  $('.nav-tabs li').removeClass('active');
});

.tab-pane {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 20px;
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="container">
    <div>

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="home">Home

          <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
          <label for="subscribeNews">Subscribe to newsletter?</label>
          <hr />
          <form method="post">
            <fieldset>
              <legend>What is Your Favorite Pet?</legend>
              <input type="checkbox" name="animal" value="Cat" />Cats <br />
              <input type="checkbox" name="animal" value="Dog" />Dogs<br />
              <input type="checkbox" name="animal" value="Bird" />Birds<br />
              <input type="submit" value="Submit now" />
            </fieldset>
          </form>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">Message</div>
        <div role="tabpanel" class="tab-pane" id="settings">Setting</div>
      </div>

    </div>
  </div>

Answer 1

我只调整了脚本，请尝试这个:

$('a[data-toggle="tab"]').hover(
  function(e) {
    $(this).parent().addClass('active');
    var target = $(this).data("target");
    $('.tab-pane.active:not(#'+target+')').hide(); // Hide the tab panel except the current target
    $($(e.target).attr('href')).slideDown('slow').addClass('active'); // Add the class 'active' to the tab panel
  },
  function(e) {
    $(this).parent().removeClass('active');
    var target = $(this).data("target");

    var targetId = target.replace('#', '');
    var relatedTarget = $(e.relatedTarget);

    if (relatedTarget.attr('id') === targetId) {
      return;
    }

    $($(e.target).attr('href')).hide();
  }
);
$('.container').hover(
  function(e) {},
  function(e) {
    $('.tab-pane.active').slideUp('slow');
    $('.nav-tabs li').removeClass('active');
});

.tab-pane {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 20px;
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="container">
    <div>

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="home">Home

          <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
          <label for="subscribeNews">Subscribe to newsletter?</label>
          <hr />
          <form method="post">
            <fieldset>
              <legend>What is Your Favorite Pet?</legend>
              <input type="checkbox" name="animal" value="Cat" />Cats <br />
              <input type="checkbox" name="animal" value="Dog" />Dogs<br />
              <input type="checkbox" name="animal" value="Bird" />Birds<br />
              <input type="submit" value="Submit now" />
            </fieldset>
          </form>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">Message</div>
        <div role="tabpanel" class="tab-pane" id="settings">Setting</div>
      </div>

    </div>
  </div>
  </div>