Toggle div on click or touch and hide on click/touch outside

Question

I\'m trying to support both mouse and touch events for a div that I want to show and hide. My mouse events work well, but I\'m not sure of how to get this to work on a touch-bas

Answer 1

You can also use setOnClickListener event and override onClick function like this :

btnclickme = (Button) findViewById(R.id.btn_clickme);
btnclickme.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                        // do your code here
            }
});

Answer 2

http://jsfiddle.net/LYVQy/2/

I just included JQuery Mobile and changed your 'click' events into .on('tap',function(e))...

Jquery Mobile seems to treat 'tap' events as clicks on desktop browsers, so this seems suit your needs.

$searchTrigger.on("tap", function(e){
    e.preventDefault();
    e.stopPropagation();
    $searchBox.toggle();
});

$(document).on('tap',function(event){

if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
    $searchBox.hide();
};
});

Answer 3

This is enough: JsFiddle

$searchTrigger.on('click', function(e) {
    $searchBox.toggle();
    e.preventDefault();
});

it works for screen and touch devices.