JQuery：on（'click'）在没有点击的情况下触发

Question

我想在点击"right"或next1按钮之前更新prev1媒体资源的价值。所以我使用了.on(mouseover)事件以及on.(click)事件。

它几乎正常工作，但有时不点击任何按钮，点击事件就会被触发，无法正常工作。

这是我的代码：

$(document).ready(function() {
  // for next button
  $('a.next1').on('mouseover', function() {
    $('div.slide_2').css("right", "-55%");
    $('div.slide_3').css("right", "-55%");
  });
  $('a.next2').on('mouseover', function() {
    $('div.slide_3').css("right", "-55%");
    $('div.slide_1').css("right", "-55%");
  });
  $('a.next3').on('mouseover', function() {
    $('div.slide_1').css("right", "-55%");
    $('div.slide_2').css("right", "-55%");
  });

  $('a.next1').on('click', function() {
    $('div.slide_1').css({
      "right": "105%",
      "opacity": "0"
    });
    $('div.slide_2').css({
      "right": "25%",
      "opacity": "1"
    });
  });

  $('a.next2').on('click', function() {
    $('div.slide_2').css({
      "right": "105%",
      "opacity": "0"
    });
    $('div.slide_3').css({
      "right": "25%",
      "opacity": "1"
    });
  });

  $('a.next3').on('click', function() {
    $('div.slide_3').css({
      "right": "105%",
      "opacity": "0"
    });
    $('div.slide_1').css({
      "right": "25%",
      "opacity": "1"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide_1" data-number="1">
  <img src="image1.jpg">
  <div class="text">Caption Text</div>
  <a class="prev1" data-number="2">&#10094;</a>
  <a class="next1" data-number="0">&#10095;</a>
</div>
<div class="slide_2 mySlides" data-number="2">
  <img src="image2.jpg">
  <div class="text">Caption Two</div>
  <a class="prev2" data-number="2">&#10094;</a>
  <a class="next2" data-number="0">&#10095;</a>
</div>
<div class="slide_3 mySlides" data-number="3">
  <img src="image3.jpg">
  <div class="text">Caption Three</div>
  <a class="prev3" data-number="2">&#10094;</a>
  <a class="next3" data-number="0">&#10095;</a>
</div>

prev按钮的代码相同。