SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Mouseup event not working as expected

    I'm trying to switch to pure javascript from jQuery. The code below shows my progresses so far:
    HTML
    Code:
    <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
    Code:
    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
    Code:
    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ketting00 View Post
    The problem: the 'content' div disappears when I click on itself. I want it to remain showing until I click on anywhere else
    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."

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

    "Check if it's outside of the content area."

    Code javascript:
    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."

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

    That's the basics of it.

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

    1. Walk on up the DOM checking if that's the content area
    2. If it is the content area, then we can return false because we're not outside of it
    3. If it's not the content area, we need to check the targets parent
    4. Before checking the parent though, we need to check if we have reached the top, the HTML element
    5. If we haven't fallen out the top, we can check from the target's parent and keep on checking upwards


    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,887
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

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

    HTH

    Edit: Beaten to it (again )

  4. #4
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thank you,

    It is basically working.

  5. #5
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Pullo's method is not working.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,887
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Really?
    In which browser are you testing?
    Works fine for me in the latest Chrome.

  7. #7
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I use Chrome Beta. I mean the div block does not disappear when I click outside it.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,887
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Can you try with this:

    Code:
    <!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. #9
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,887
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    No probs


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •