没有 href、onclick 等的按钮答案

【问题标题】：buttons with no href, onclick etc没有 href、onclick 等的按钮
【发布时间】：2012-02-07 16:04:39
【问题描述】：

最近，我看到很多网站都有可点击的对象，但它们的 html 代码中没有任何 href 或 onclicks。我还尝试提醒他们的 href、onclick、onmousedown、onmouseup 属性，但它只显示“未定义”。我确实注意到这些页面中有很多复杂的 javascript。

有一个网站特别让我感到困惑： http://www.sharenator.com/Boy_Teaches_His_Puppy_How_to_Eat/#/doggy_01_Boy_Teaches_His_Puppy_How_to_Eat-0.html

其实挺好的。按钮也不可选择。按钮的 id 为 nextBtn、nextBtn2、prevBtn 和 prevBtn2。

有人知道如何实现吗？

【问题讨论】：

@karunchadhary 我可以看到您刚刚注册，所以欢迎来到 StackOverflow 社区 :) 如果其中一个答案回答了您的问题，请将其标记为正确答案。

标签： javascript ajax onclick href

【解决方案1】：

您可以使用 jQuery 的 .click(callback) 函数 (http://api.jquery.com/click/) 或 .delegate(selector, 'click', callback) (在 jQuery 1.7 之前) 和 .on('click', selector, callback) (jQuery 1.7+) 或 .bind('click', callback)。

感谢 Anthony Grist 指出 .live() 现在已弃用 :)

这样：

<button id="clickable">Click Me!!</button>

然后用 jQuery 定位按钮：

$("#clickable").click(function(){
    // Send user to this link
    location.href = "http://www.takemehere.com";
});

您可以在我提供的链接和 jQuery 的主页上阅读更多相关信息。

更新

实际页面通过以下方式处理：

$('#prevBtn').mousedown (onBackward);

onmousedown 会调用哪个：

function onBackward () {
    showImg (currentId - 1);
}

方向键的使用：

 $(document).keyup (function (event) {
    var activeElement = document.activeElement.tagName;
    if (activeElement == 'INPUT' || activeElement == 'TEXTAREA') return;
    //alert (window.location.pathname);

    if (event.keyCode == 39) onForward();
    else
    if (event.keyCode == 37) onBackward();
});

幻灯片源代码见http://www.sharenator.com/js/slideshow.js。

【讨论】：

.live() 已弃用，您应该改用 .on() (jQuery 1.7+) 或 .delegate() (jQuery 1.7 之前)。
如何实现带“左”-“右”箭头的图片间导航？
@AnthonyGrist 感谢您指出这一点，有一段时间没有阅读文档了 :) 根据您的建议编辑我的代码。
这可能是大多数网站中的情况。我一直在推迟学习 jquery。但我想我必须开始
@karunchaudhary jQuery 是一个美妙而强大的工具，我绝对推荐学习如何使用它:)

【解决方案2】：

您可以尝试使用 jQuery ui 库 - 它可以按照您指定的方式创建按钮。

jQuery UI

【讨论】：

【解决方案3】：

事件处理程序可能使用 jQuery 等 Javascript 框架进行绑定。他们不使用 DOM 元素的 onclick 属性。有关使用 jQuery 将 click 事件处理程序绑定到按钮的示例，请参阅 this jsFiddle，然后单击该按钮以查看该按钮的 onclick 值（在 FF 9 中显示为 null）。

【讨论】：

【解决方案4】：

使用 javascript，找到元素并为其提供 onClick 事件处理程序。例如：

var myElement = document.body;  // or document.getElementById(...), etc.
myElement.onclick = function(event) {alert(event);}

这将避免在 HTML 中显示任何内容，并且您链接的网站就是这样做的（没有其他方法可以定义行为...除了深奥的 CSS）。

【讨论】：

【解决方案5】：

使用 javascript。这是一个例子：

<a id="uniqueId" href="#">Button</a>

<script>
    var button = document.getElementById('uniqueId');
    button.onclick = function(e) {
        alert("clicked!");
    }
</script>

【讨论】：

这个方法的问题是我运行的时候还是会看到函数：alert(document.getElementById('uniqueId').onclick)

【解决方案6】：

点击函数可以在js中初始化，例如$("#nextBtn").click(function);

【讨论】：