单击或触摸时切换div并在外部单击/触摸时隐藏

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

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

这是我的HTML：

 
 Search 
 
 
   
 
  

而且，我的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

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

我刚刚收录了JQuery Mobile并将你的“点击”事件更改为.on（’tap’，function（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(); }; }); 

Answer 2

这就足够了： JsFiddle

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

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

Answer 3

您还可以使用setOnClickListener事件并覆盖onClick函数，如下所示：

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