javascript - 角色 ="button"是什么意思？

Question

我发现在 Google+ 项目的页面中，按钮都是由 div 制成的，例如:

<div role="button"></div>  

我想知道，这只是出于语义目的，还是会影响 <div> 的样式或事件处理？ ？

我尝试用 jQuery 模拟按钮“点击”click事件，但没有用。

Answer 1

它告诉可访问性(和其他)软件 div 的目的是什么。更多信息在 draft role attribute specification .

是的，这只是语义上的。向按钮发送 click 事件应该有效。

---

这个答案的早期版本(早在 2011 年)说:

...but jQuery's click function doesn't do that; it triggers only the event handlers that have been hooked up to the element with jQuery, not handlers hooked up in other ways.

...并在下面提供了示例代码和输出。

我现在无法复制输出(两年后)。即使我回到 jQuery 的早期版本，它们都会触发 jQuery 处理程序、DOM0 处理程序和 DOM2 处理程序。实际点击和 jQuery 的 click 函数之间的顺序不一定相同。我已经尝试过 jQuery 版本 1.4、1.4.1、1.4.2、1.4.3、1.4.4、1.5、1.5.1、1.5.2、1.6 和更新的版本，例如 1.7.1、1.8.3、 1.9.1 和 1.11.3(撰写本文时的当前 1.x 版本)。我只能断定这是 浏览器 的问题，而且我不知道我使用的是什么浏览器。 (目前我正在使用 Chrome 26 和 Firefox 20 进行测试。)

这是一个测试，它表明确实，jQuery 处理程序、DOM0 处理程序和 DOM2 处理程序都是(在撰写本文时!)由 jQuery 的 click 触发的:

jQuery(function($) {
  var div;

  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);

  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways
  div = document.getElementById("theDiv");
  div.onclick = dom0Handler;
  if (div.addEventListener) {
    div.addEventListener('click', dom2Handler, false);
  } else if (div.attachEvent) {
    div.attachEvent('onclick', dom2Handler);
  }

  // Hook up a handler using jQuery
  $("#theDiv").click(jqueryHandler);

  // Trigger the click when our button is clicked
  $("#theButton").click(function() {
    display("Triggering <code>click</code>:");
    $("#theDiv").click();
  });

  function dom0Handler() {
    display("DOM0 handler triggered");
  }

  function dom2Handler() {
    display("DOM2 handler triggered");
  }

  function jqueryHandler() {
    display("jQuery handler triggered");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery's <code>click</code> function.</div>
<input type='button' id='theButton' value='Click Me'>