我正在尝试在 <a href="#" ...>
上创建一个按钮使用 HTML+CSS+Javascript+jQuery 标记。按钮显示正常。但是,当我单击它时,除了默认行为(即导航到“#”)外,什么也没有发生。关于我做错了什么的任何建议?这是我的代码:
//container is a div created with
//borderDiv = document.createElement('div') and
//document.body.appendChild(borderDiv);
function addMenuNavigation(container) {
var temp_innerHTML = '' +
'<div id="titleBar" class="titleBar">' +
'<div id="menuTitle" class="menuTitle"><img id="titleImage" style="height: 70px; position: absolute; top: 2px; left:120px"></img></div>' +
'<a href="#" class="leftButton" id="leftButton">' +
' <div style="position: relative; top: 6px;"><img src="' + getURL('img/menu/iPhoneStyle/chevronLeft.png') + '"></img></div>' +
'</a>' +
'</div>' + //titleBar
'';
container.innerHTML = temp_innerHTML;
var $leftButton = $('#leftButton');
console.dir($leftButton); //Indeed it does display the #leftButton element
//FIXME BUG 'MenuNavigation' below functions do not get registered ...
$('#leftButton').mousedown(function(e) {
$('#leftButton').addClass("pressed");
console.log('leftButton down ' + this.id);
});
$('#leftButton').mouseup(function(e) {
console.log('leftButton up ' + this.id);
$(this).removeClass("pressed");
});
$('#leftButton').click(function(e){
console.log('leftButton clicked ' + this.id);
click_e.preventDefault();
});
}
.css如下
.titleBar {
...
display: block;
height: 63px;
opacity: 0.8;
padding: 6px 0;
...
background-image: -webkit-gradient(linear, left top, left bottom,
from(#bbb), to(#444));
z-index: 35;
}
.leftButton:not(ac_hidden), .leftButton:not(pressed) {
left: 6px;
...
-webkit-border-image: url(../img/menu/iPhoneStyle/back_button.png) 0 8 0 8;
}
.leftButton.pressed{
-webkit-border-image: url(../img/menu/iPhoneStyle/back_button_clicked.png) 0 8 0 8;
}
我正在使用 Chrome。
有什么建议吗?谢谢。
最佳答案
$('#leftButton').click(function(e){
console.log('leftButton clicked ' + this.id);
click_e.preventDefault();
});
应该是e.preventDefault();
关于javascript - 无法将 click/mouseup/mousedown 事件监听器添加到 <a href>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8041265/