仅在内部的一个元素上禁用 onclick

Question

我有一个功能可以显示我的 wordpress 搜索表单，也可以隐藏它。问题是我希望所有容器都可以点击 display/hide，但是当我点击我的搜索表单的文本输入时它隐藏了它。单击输入时是否可以不触发 onclick 事件？

这是我的架构：

<li onclick="search_form(this)">
  <img src="#" >
  <div>
      <form role="search" id="searchform" method="get" action="/">
          <div>
              <input type="text" name="s" id="s" size="15" required="" placeholder="Search">
          </div>
      </form>
  </div>
</li>

我有类似的东西https://puu.sh/t3tiN/8655c07973.png（我的李的照片）

谢谢

编辑：有人问我这个功能，不想添加它，因为它只是 css :

function search_form() {
  if ($(window).width() > 1041) {
      var display = $('#mobile_search_form').css('display');
            if (display == "none") {
                  /* many css animate */

            } else if (display == "inline-block") {
                  /* many css animate */
            }
    }else if ($(window).width() < 1041) {
      window.location.href = "#"
      $(document).ready(function () {
        $('#result_number').css('display',"none");
      });
    }
}

Answer 1

看看stopPropagation()。我认为这正是您想要做的：

<li id="myLi">
  <img src="#" >
  <div>
      <form role="search" id="searchform" method="get" action="/">
          <div>
              <input type="text" name="s" id="s" size="15" required="" placeholder="Search">
          </div>
      </form>
  </div>
</li>

Javascript:

$("#myLi").click(search_form($(this));
$("#s").click(function (e) {
    e.stopPropagation();
});

Answer 2

如果您不介意一些内联脚本：

<li onclick="search_form(this)">
  <img src="#" >
  <div>
      <form role="search" id="searchform" method="get" action="/">
          <div>
              <input onclick="event.stopPropagation()" type="text" name="s" id="s" size="15" required="" placeholder="Search">
          </div>
      </form>
  </div>
</li>

致谢：我从 How to stop event propagation with inline onclick attribute?

那里得到了答案

仅在内部的一个元素上禁用 onclick

disable onclick only on one element inside

html

javascript

wordpress

jquery