将div转换成JavaScript按钮

Question

我有一个经过精心格式化的<div>，看起来很漂亮，现在我需要让它具有按钮的功能。我该如何做呢？

- skiller185

---

分享你的代码。 - Suresh Kamrushi

“按钮的功能”是什么意思？ - Milan Chheda

用“button”替换“div”。 - Znaneswar

Nisal Edu 给了我所需的一切。 - skiller185

Answer 1

您可以将以下代码添加到div标签中以实现点击功能。

function myfns() {
    console.log("Clicked")
}

<div id="btn" onclick="myfns()">Click</div>

- Nisal Edu

---

这不适用于屏幕阅读器或键盘用户。 - amcdrmtt

Answer 2

首要建议是使用 <button>，你可以随意设置样式。如果由于某些原因不能使用它，你需要做一些不同的事情，将 div 元素转换为适当的按钮（以确保其与键盘和屏幕阅读器兼容）。

• 添加点击处理程序。例如：btn.addEventListener('click', clickHandler);
• 添加回车键处理程序。例如：btn.addEventListener('keyup', keyHandler);
• 添加按钮角色。 role="button"
• 将其添加到 Tab 键顺序中：tabindex="0"

var buttons = document.querySelectorAll('.btn');

buttons.forEach(function (btn) {
  btn.addEventListener('click', function(e) {
    console.log('clicked');
  });
  
  btn.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
      console.log('keyup');
    }
  });
});

.btn {
  display: inline-block;
  background: #eee;
  border: 1px solid #aaa;
  padding: 6px;
  cursor: pointer;
}

<div class="btn" role="button" tabindex="0">My Button</div>

<div class="btn" role="button" tabindex="0">My Button</div>

<div class="btn" role="button" tabindex="0">My Button</div>

- amcdrmtt

---

他要求的是 div 而不是按钮。 - manish kumar

他要求一个div具有按钮的功能。按钮比点击处理程序具有更多的功能。我认为大多数开发人员可能不希望他们的应用程序适用于所有人。 - amcdrmtt

Answer 3

document.getElementByID("#divID").addEventListenet('click',()=>{
//write your logic
})

类似地处理所有按钮事件 例如 双击 等

- manish kumar

---

但这对于键盘或屏幕阅读器是无效的。 - amcdrmtt

这完全取决于使用情况。他没有那个要求。 - manish kumar

根据问题，我想他是这样的。他不是在要求将点击处理程序添加到div中。他是说“使其具有按钮的功能”，这将包括所有按钮的功能，我想。 - amcdrmtt

Answer 4

比如你有一个 div

 <div class="demo" >
    ....
    </div>

如果您正在使用 JavaScript

document.getElementsByClassName('demo')[0]
        .addEventListener('click', function (event) {
            // do something
    });

使用 jQuery，您可以像这样实现

$(".demo").click(function(){
//do something
});

- Kishan Oza

---

这并没有赋予div按钮的功能。按钮不仅仅有一个点击处理程序，它还适用于键盘用户，但是你的解决方案不适用。按钮还适用于屏幕阅读器用户，但是你的解决方案也不适用。 - amcdrmtt

好的，很酷，那就不用我的了 :) 简单明了。 - Kishan Oza