1

我正在尝试为要显示和隐藏的 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/

4

3 回答 3

4

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();
};
});
于 2013-12-10T20:40:04.430 回答
2

这已经足够了：JsFiddle

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

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

于 2012-08-24T15:35:45.523 回答
0

您还可以像这样使用setOnClickListener事件和覆盖onClick功能：

btnclickme = (Button) findViewById(R.id.btn_clickme);
btnclickme.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                        // do your code here
            }
});
于 2012-08-24T15:41:36.017 回答