这是我的第一个问题,我希望我已经做了足够的研究,以确保它以前没有被提出过。我想知道没有其他人有这个问题。
我制作了一把小提琴来说明我的问题:http://jsfiddle.net/KA54D/
<!DOCTYPE HTML>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h3>Page 1</h3>
</div>
<div data-role="content">
<button data-icon="check">Click me at my border</button>
</div>
</div>
</body>
使用以下JavaScript代码:
$('button').click(
function() {
$('.ui-content').append('click ');
}
);
将单击事件绑定到按钮时,单击按钮边框时不会触发此事件。但是风格的下降状态被触发了。
我不喜欢像这样的结构
$('button').closest('.ui-btn').click(...)
因为它不是真正的流动性。在设计时没有.ui-btn,因为它是由框架稍后添加的。我不想关心自由党内部做了什么。有没有办法告诉jQueryMobile将事件、属性、css类等重新分配给我的按钮的包含元素?
不要使用<button>
或<input type="submit">
,而是使用具有data-role="button"
属性的<a>
。
<a href="#" data-role="button" data-icon="check">Button</a>
具有data-role=button
的锚不会被.ui-btn
div包裹。因此,您将拥有整个按钮来响应任何事件。
事实上,事件并没有在大约1-2px的边界上触发,我认为这是由于jQuery Mobile管理按钮并创建最终组件的方式,可能是他们在初始按钮周围创建了一个特殊的边界,而这不是按钮的一部分。
总而言之,我不认为这是一个问题,因为没有用户会点击边框上的1到2像素左右。
以下是组成按钮的实际组件,也许这可以解释问题。。看看该事件是否触发了button
元素、周围的div
或其他什么,会很有趣!
<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="check" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner">
<span class="ui-btn-text">Click me at my border</span>
<span class="ui-icon ui-icon-check ui-icon-shadow"> </span>
</span>
<button data-icon="check" class="ui-btn-hidden" data-disabled="false">Click me at my border</button>
</div>
我现在找到了另一个仅支持CSS的解决方案:
.ui-btn button {
margin: -1px 0 0 -1px;
padding: 0 2px 2px 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
.ui-header .ui-btn button {
margin: 0;
padding: 1px 0;
left: 0px;
right: 0px;
top: 0px;
}
但是,我将保留我接受的答案,因为这个答案不需要对jQueryMobile本身进行任何修改。