Factorize javascript/jquery code for hiding modal when click outside

Question

I have a code that work but I don't know how to factorize it. It seems I could be able to do it as they're basically the same code first for desktyop then for touch devices:

//desktop

  $(document).mouseup(function (e)
  {
      var container = $(".messenger");
      if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0) // ... nor a descendant of the container
      {
          container.empty();
          container.off( 'click', clickDocument );
      }
  });



// Touch devices like IPAD and IPHONE we can use following code

$(document).on('touchstart', function (e) {
    var container = $(".messenger");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.empty();
        container.off( 'click', clickDocument );
    }
});

you just need a stand alone function and when the event is triggered, call it — colecmc, Feb 05 '16 at 17:27
I'm not familiar with the term "factorize", and I couldn't find an applicable definition on google. Can you please clarify? — Jonathan Vance, Feb 05 '16 at 17:32

score 2 · Accepted Answer · edited Feb 05 '16 at 19:46

2

Quite easy:

// desktop (mouseup)
// or Touch devices like IPAD and IPHONE we can use following code

  $(document).on('mouseup touchstart', function (e)
  {
      var container = $(".messenger");
      if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0) // ... nor a descendant of the container
      {
          container.empty();
          container.off( 'click', clickDocument );
      }
  });

edited Feb 05 '16 at 19:46

Mathletics

31,135
5
47
57

answered Feb 05 '16 at 17:32

cFreed

4,062
1
19
33

Why switch from `on` to `bind`? – Mathletics Feb 05 '16 at 17:37
@Mathletics Didn't really "switched", since the OP's version didn't use `on()`, but dedicated `mouseup()` and `touchstart()` methods. So I somewhat automtically used `bind()` but sure it could be `on()` too. – cFreed Feb 05 '16 at 17:51
The reason I ask is because [in the docs for `bind`](http://api.jquery.com/bind/) they state: _As of jQuery 1.7, the `.on()` method is the preferred method for attaching event handlers to a document._ – Mathletics Feb 05 '16 at 19:46
@Mathletics Again, you're right: it's better to follow the recommended methods. I intially reacted by habit. – cFreed Feb 05 '16 at 21:48

score 2 · Answer 2 · answered Feb 05 '16 at 17:32

2

Change it to:

var onMouseUp = function (e) {
    var container = $(".messenger");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.empty();
        container.off( 'click', clickDocument );
    }
};

// For Desktop
$(document).mouseup(onMouseUp);

// For devices
$(document).on('touchstart', onMouseUp);

answered Feb 05 '16 at 17:32

leo.fcx

5,299
2
17
36

What's the value of using a function expression in this case? – colecmc Feb 05 '16 at 17:40
Avoid defining it twice and re-using it instead. – leo.fcx Feb 05 '16 at 17:42
I mean, as opposed to writing it like this: `function onMouseUp () { /**/ }` By convention I guess, the function expression form usually returns a value, right? – colecmc Feb 05 '16 at 17:46
1

Just order (personal opinion). Check this for info http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname – leo.fcx Feb 05 '16 at 17:49

score 1 · Answer 3 · answered Feb 05 '16 at 17:34

1

may you can try this:

var eventTouch = function(e){    
    var container = $(".messenger");
        if (!container.is(e.target) 
            && container.has(e.target).length === 0) 
           {
            container.empty();
            container.off( 'click', clickDocument );
           }
    }

$(document).mouseup(eventTouch);
$(document).on('touchstart', eventTouch);

answered Feb 05 '16 at 17:34

mottaman85

189
4

What's the value of using a function expression in this case? – colecmc Feb 05 '16 at 17:40
only create one function for a twice events, and it's more clean, you can order your code on sections, one for definition methods and one to implementation – mottaman85 Feb 05 '16 at 17:47

Factorize javascript/jquery code for hiding modal when click outside

3 Answers3