disable onclick only on one element inside

Question

I have a function to display my wordpress search form, and to hide it. The problem is that I want all the container to be clickable to display/hide, but when I click the text input of my search form it hide it. Is it possible to not trigger the onclick event when I click on the input ?

Here is my architecture :

<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>

I have something like that https://puu.sh/t3tiN/8655c07973.png (picture of my li)

Thank you

Edit : Someone asked me for the function, didn't want to add it because it's just 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");
      });
    }
}

the code is too long, and full of css animate, but I can still share it — J.Aurélien, Dec 28 '16 at 11:09

score 0 · Accepted Answer · answered Dec 28 '16 at 11:11

Take a look at stopPropagation(). I think this is exactely what you want to do:

<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();
});

You're right it's exactly what I couldn't find. Thank you ! – J.Aurélien Dec 28 '16 at 11:21 — J.Aurélien, Dec 28 '16 at 11:21

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

If you don't mind a bit of inline script:

<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>

Credit: I got the answer from How to stop event propagation with inline onclick attribute?

edited May 23 '17 at 12:16

Community

1
1

answered Dec 28 '16 at 11:16

vothaison

1,646
15
15

1

I can't do that, it's a form generated by wordpress. – J.Aurélien Dec 28 '16 at 11:20

disable onclick only on one element inside

2 Answers2