Mouseup event not working as expected

JavaScript
1

I’m trying to switch to pure javascript from jQuery. The code below shows my progresses so far:
HTML


<div id=content>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ...
</div>
<button id=button>Test</button>

JS


var content = document.getElementById('content')
  , button = document.getElementById('button')
  ;

var showContent = function() {
	content.style.display = 'block';
};

button.addEventListener('click', showContent, false);

window.addEventListener('mouseup', function() {
	content.style.display = 'none';
});

CSS


body {
	position: relative;
	z-index: 100;
}
#content {
	position: absolute;
	z-index: 1000;
	width: 250px;
	min-height: 150px;
	height: 100% !important;
	display: none;
	left: 150px;
	top: 50px;
	border: 1px solid #ccc;
}

The problem: the ‘content’ div disappears when I click on itself. I want it to remain showing until I click on anywhere else.

Thank you,

2

You will want to find out what was clicked on and check if it’s outside of the content area. Only if it’s outside of the content area do you want to hide the content.

Lets break this down piece by piece.

“Find out what was clicked on.”


window.addEventListener('mouseup', function(evt) {
    var targ = evt.target;
    ...
}

“Check if it’s outside of the content area.”


if (targetIsOutside(targ, content)) {
    ...
}

That targetIsOutside function is where more code will need to be written, which we can get in to at the end of this.

“Only if it’s outside of the content area do you want to hide the content.”


if (...) {
    content.style.display = 'none';
}

That’s the basics of it.

With the targetIsOutside function, we are going to do the following:

[list=1][]Walk on up the DOM checking if that’s the content area
[]If it is the content area, then we can return false because we’re not outside of it
[]If it’s not the content area, we need to check the targets parent
[]Before checking the parent though, we need to check if we have reached the top, the HTML element
[*]If we haven’t fallen out the top, we can check from the target’s parent and keep on checking upwards
[/list]


function targetIsOutside(targ, content) {
    if (targ === content) {
        return false;
    }
    if (targ.nodeName === 'HTML') {
        return true;
    }
    return targetIsOutside(targ.parentNode, content);
}

There may be some other complexities needed if you want it to work on a wide range of web browsers, but that’s the basics of things.

3

Hi,

Attach a mouseup event handler to the content div and stop propagation to the window.

content.addEventListener('mouseup', function(e) {
  e.stopPropagation();
});

HTH

Edit: Beaten to it (again :))

4

Thank you,

It is basically working.

5

Pullo’s method is not working.

6

Really?
In which browser are you testing?
Works fine for me in the latest Chrome.

7

I use Chrome Beta. I mean the div block does not disappear when I click outside it.

8

Can you try with this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unbenanntes Dokument</title>
    <style>
      body {
        position: relative;
        z-index: 100;
      }
      #content {
        position: absolute;
        z-index: 1000;
        width: 250px;
        min-height: 150px;
        height: 100% !important;
        display: none;
        left: 150px;
        top: 50px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  
  <body>
    <div id=content>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ...
    </div>
    <button id=button>Test</button>
    
    <script>
      var content = document.getElementById('content'),
      button = document.getElementById('button');
      
      var showContent = function() {
        content.style.display = 'block';
      };
      
      button.addEventListener('click', showContent, false);
      
      window.addEventListener('mouseup', function() {
        content.style.display = 'none';
      });
      
      content.addEventListener('mouseup', function(e) {
        e.stopPropagation();
      });
    </script>
  </body>
</html>
9

Yes, It works perfectly. But I have no idea why in another html file with separate js file I tested previously is not working.

EDIT:
Sorry, I don’t put this parts together:


window.addEventListener('mouseup', function() {
        content.style.display = 'none';
      });
      
      content.addEventListener('mouseup', function(e) {
        e.stopPropagation();
      });

Thank you, I love it. It’s shorten my code too.

10

No probs :slight_smile: