javascript 单击或触摸时切换 div 并在单击/触摸外部时隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12112404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle div on click or touch and hide on click/touch outside
提问by ctrlaltdel
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).
我正在尝试为要显示和隐藏的 div 支持鼠标和触摸事件。我的鼠标事件运行良好，但我不确定如何让它在基于触摸的设备（iPhone、iPad 或基于 Android 的手机）上工作。
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:
这是我的 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):
而且，我的 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();
};
});
Working example: http://jsfiddle.net/T5HMt/
工作示例：http: //jsfiddle.net/T5HMt/
回答by Brad
I just included JQuery Mobile and changed your 'click' events into .on('tap',function(e))...
我刚刚包含了 JQuery Mobile 并将您的“点击”事件更改为 .on('tap',function(e)) ...
Jquery Mobile seems to treat 'tap' events as clicks on desktop browsers, so this seems suit your needs.
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();
};
});
回答by Andrea Turri
回答by Nishu Tayal
You can also use setOnClickListenerevent and override onClickfunction like this :
您还可以像这样使用setOnClickListener事件和覆盖onClick功能：
btnclickme = (Button) findViewById(R.id.btn_clickme);
btnclickme.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// do your code here
}
});
