69

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

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

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

我试图用 jQueryclick事件模拟一个按钮“单击”，但它不起作用。

4

4 回答 4

32

它告诉可访问性（和其他）软件的目的div是什么。属性规范草案role中的更多内容。

是的，这只是语义。click向按钮发送事件应该可以工作。

这个答案的早期版本（早在 2011 年）说：

...但是 jQuery 的click函数并没有这样做；它仅触发已使用 jQuery连接到元素的事件处理程序，而不触发以其他方式连接的处理程序。

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

我现在（两年后）无法复制输出。即使我回到早期版本的 jQuery，它们都会触发 jQuery 处理程序、DOM0 处理程序和 DOM2 处理程序。click实际点击和 jQuery函数之间的顺序不一定相同。我尝试过 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'>

于 2011-07-03T10:43:14.783 回答
16

这只是语义。

建议您使用带有<button>标签的原生 HTML 按钮。<a>但是，如果您有使用或标记的自定义控件，强烈建议您使用<div>以下信息。role='button'

  1. 触发响应

如果您正在构建自定义控件，它们应该像按钮一样工作。如果单击该元素，它应该会触发响应。例如，此响应不会更改按钮的文本，即自定义控件。如果是，那么它不是一个按钮。

  1. 键盘焦点

这些作为按钮的自定义控件应该可以通过键盘切换来获得焦点，并且还应该可以通过编程方式为屏幕阅读器获得焦点。

  1. 可操作性

自定义控件应该实现onclick以及onKeyDown事件。可以通过空格键激活按钮。因此，如果要将角色添加到自定义控件，则需要自己处理这些事件。否则，语义就失去了意义。屏幕阅读器用户将尝试使用空格键激活按钮，但不能。

自定义控件的标准语法role='button'是

<div role="button" tabindex="0" onclick="click_handler()" onKeyDown="keyhandler_for_space()">

如果tabindex="0"您使用<a>标签，则不需要，但如果您使用不可聚焦的标签，例如<span>或<div>手动允许焦点，则需要。

另一个有用的提示是，如果您仍在使用自定义按钮，最好使用<a>标签，因为您可以避免 onclick 处理程序。

于 2015-11-29T12:51:35.763 回答
5

可访问性软件使用该role属性来了解其div作用。有关详细信息，请参阅此页面。

于 2011-07-03T10:46:05.260 回答
2

在此处输入图像描述

根据 Twitter 上的@Katherinecodes 是这样的

于 2021-09-25T00:56:10.110 回答