What would be the opposite of onclick="myFunction()"?

Question

NOT A DUPLICATE because I'm asking for an "offclick" event (if any) for the purpose of hiding an element, not how to hide the element.

I have a container with display: none; that it's only shown when clicking on a <textarea> tag by using onclick="myFunction()". However, I'd like to set the container back to display: none; once it is clicked outside the <textarea>.

Is there any offclick equivalent for this?

  function myFunction() {
  $('.testing').css({
    display: 'inline-block'
  });
}

.testing {
  display: none;
}

<div>
  <textarea onclick="myFunction()" placeholder="Write something..."></textarea>
</div>
<div class="testing"></div>

https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — Dupocas, Oct 22 '19 at 17:45
there is no Html element with `onclick=“myFunction()”` please show us — Mister Jojo, Oct 22 '19 at 17:45
I think OP is looking for onfocusout: https://www.w3schools.com/jsref/event_onfocusout.asp — dikuw, Oct 22 '19 at 17:48

score 1 · Accepted Answer · answered Oct 24 '19 at 15:04

1

Most probably you will have to look into onMouseUp event.

https://www.w3schools.com/jsref/event_onmouseup.asp

answered Oct 24 '19 at 15:04

Ayush

485
2
6
19

score 1 · Answer 2 · answered Jan 22 '22 at 07:08

1

You can use onblur attribute within your html tag and give it the function from your javascript. For example, here i have an input, and when i click and write stuff there, the background color of the input changes to green, but when i click outside the input, the background color changes back to white. Hope this helped. ^^

<input type="text" onclick="makeBackgroundColorGreen()" onblur="resetBackgroundColortoWhite">

answered Jan 22 '22 at 07:08

jaehyuk kim

39
7

read the [docs](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur) for more info – Sarout Jan 26 '22 at 11:19

score 0 · Answer 3 · answered Oct 22 '19 at 17:44

0

You'd need a listener at the window level and then hide it depending on whether the click was made outside the textarea (target), but only if the textarea is visible, otherwise it would be pointless making the comparison.

answered Oct 22 '19 at 17:44

Jorge Solis

1,796
1
10
12

score 0 · Answer 4 · answered Oct 22 '19 at 17:44

0

$(document).click(function(event) {
    if (!$(event.target).is(".testing")) {
        $(".testing").hide();
    }
});

answered Oct 22 '19 at 17:44

vojtos

102
1
4

this makes "myFunction()" lose effect when clicking on the textarea tag – GBeck Oct 22 '19 at 17:48
My function is only for hide after click outside textarea. For show texarea use your function. – vojtos Oct 22 '19 at 17:55

score 0 · Answer 5 · answered Jul 15 '21 at 17:21

0

    menu.onclick = () =>{
  menu.classList.add('fa-times');
  navbar.classList.add('active');
}

    enter code here

window.onscroll = () =>{
  menu.classList.remove('fa-times');
  navbar.classList.remove('active');
}

answered Jul 15 '21 at 17:21

Ashwath M N

1
1

6

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P Jul 15 '21 at 20:20

What would be the opposite of onclick="myFunction()"?

5 Answers5