在点击或触摸时切换div并在点击/触摸时隐藏

Question

我正试图支持鼠标和触摸事件，以便显示和隐藏div。我的鼠标事件运行良好，但我不确定如何使其在基于触摸的设备（iPhone，iPad或基于Android的手机）上运行。

交互应该是当用户点击或触摸触发器时，显示“搜索”框，如果他们在打开的搜索框外单击/触摸或重新点击/触摸触发器，它应该关闭（隐藏）。

这里是我的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> 

而且，我的JavaScript（使用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(); 
    }; 
}); 

工作例如：http://jsfiddle.net/T5HMt/

Answer 1

这是不够的：JsFiddle

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

它适用于屏幕和触摸设备。

Answer 2

您还可以使用setOnClickListener事件并覆盖onClick功能是这样的：

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

Answer 3

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

我只是包括jQuery Mobile的，改变你的 'click' 事件到。对（ '水龙头'，函数（e））...

Jquery Mobile似乎将点击事件视为点击桌面浏览器，所以这似乎适合您的需求。

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