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-based device (iPhone, iPad or Android-based phone).

The interaction should be that when a user clicks or touches the trigger, the "search" box is shown, and if they click/touch outside of the opened search box OR re-click/touch the trigger, it should close (hide).

Here's my HTML:

<div id="search">
    <div class="search-link">
        <a href="#search" class="search-nav-button" id="search-trigger">Search</a>
    </div>
    <div class="search-box">
        <form action="/search" id="search_form">
            <input placeholder="Search" type="text" />
            <input id="search-submit" type="submit" value="Submit" />
        </form>
    </div>
</div>

And, my JavaScript (using jQuery):

var $searchBox = $('#search .search-box');
var $searchTrigger = $('#search-trigger');

$searchTrigger.on("click", function(e){
    e.preventDefault();
    e.stopPropagation();
    $searchBox.toggle();
});
$(document).click(function(event){
    if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
        $searchBox.hide();
    };
});

Working example: /

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-based device (iPhone, iPad or Android-based phone).

The interaction should be that when a user clicks or touches the trigger, the "search" box is shown, and if they click/touch outside of the opened search box OR re-click/touch the trigger, it should close (hide).

Here's my HTML:

<div id="search">
    <div class="search-link">
        <a href="#search" class="search-nav-button" id="search-trigger">Search</a>
    </div>
    <div class="search-box">
        <form action="/search" id="search_form">
            <input placeholder="Search" type="text" />
            <input id="search-submit" type="submit" value="Submit" />
        </form>
    </div>
</div>

And, my JavaScript (using jQuery):

var $searchBox = $('#search .search-box');
var $searchTrigger = $('#search-trigger');

$searchTrigger.on("click", function(e){
    e.preventDefault();
    e.stopPropagation();
    $searchBox.toggle();
});
$(document).click(function(event){
    if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
        $searchBox.hide();
    };
});

Working example: http://jsfiddle/T5HMt/

• javascript
• jquery
• iphone
• ipad
• touch

3 Answers 3

http://jsfiddle/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();
};
});

This is enough: JsFiddle

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

it works for screen and touch devices.

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
            }
});