Question

这是我的JS，仅在第一次使用时有效（需要刷新才能再次使用）

  $('.example-form').on('click', function(e){
      e.preventDefault();
      $(this).toggleClass('myClickState');
      });

   $('.example-form').on('mouseenter', function(e){
      e.preventDefault();
      $(this).toggleClass('myClickState');
      });

   $('.example-form').on('mouseleave', function(e){
      e.preventDefault();
      $( this ).css("border-color","rgba(0, 0, 0, .075)");
      });

以下代码适用于悬停操作，但是我似乎无法正确添加click函数：

$(document).ready(function(){

  $( ".example-form" )
  .mouseenter(function() {
  $( this ).css("border","red solid 1px");
  })
      .mouseleave(function() {
  $( this ).css("border-color","rgba(0, 0, 0, .075)");
  });
});

如何添加onclick函数，使其与后面的代码一起使用？

我希望在单击时具有搜索表单框，边框变为红色，在搜索框之外单击时会消失。悬停时，边框变为读取状态。

Answer 1

我认为您需要这样的东西：

$(document).ready(function(){
    $(window)
       .click(function() {
        $( ".example-form" ).css("border","rgba(0, 0, 0, .075) solid 1px");
    });

    $('.example-form')
        .click(function(event){
            event.stopPropagation();
            $( this ).css("border","red solid 1px");
        })
        .mouseenter(function() {
            $( this ).css("border","red solid 1px");
        });
});

但是您必须知道，应该避免使用stopEventPropagation（），因为它会破坏DOM中的正常事件流。

另一种形式是使用.focusout（）

 $(document).ready(function(){
    $('.example-form')
        .focusout(function(){
            $( this ).css("border","rgba(0, 0, 0, .075) solid 1px");
        })
        .click(function(){
            $( this ).css("border","red solid 1px");
        })
        .mouseenter(function() {
            $( this ).css("border","red solid 1px");
        });
});

您可以在这里http://api.jquery.com/focusout/

中进行阅读

Answer 2

您可以使用on并指定多个事件，并用空格分隔它们。

$('.example-form').on('click mouseenter', function(e){
	e.preventDefault();
	$(this).css("border","red solid 1px");
}).on('mouseleave', function(e){
	e.preventDefault();
	$(this).css("border-color","rgba(0, 0, 0, .075)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="submit" class="example-form">
  <input type="search" />
</form>

如何重新启动Javascript或结合onclick mouseent和mouseleave？

2 个答案: