角色=按钮是什么意思？ [英] What does role=button mean?

问题描述

 < div role =按钮在Google+项目的页面中，按钮全部由div制成：
 >< / DIV> 
  

我想知道，这仅仅是为了语义，它会影响风格或事件div的句柄？我试图模拟点击与JQuery单击按钮，但它不起作用。它告诉可访问性（和其他），它不会工作。

解决方案

软件 div 的用途是什么。在这里草稿角色属性规范。

是的，它只是语义。发送一个点击事件到按钮应该。

---

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

...但是jQuery的点击功能不会那样做;它只触发事件处理程序，这些事件处理程序通过jQuery连接到元素 ，而不是以其他方式连接到处理程序。

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

现在我无法复制输出（两年后）。即使我回到早期版本的jQuery，它们也会触发jQuery处理程序，DOM0处理程序和DOM2处理程序。实际点击与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的点击触发：

  jQuery（function（$）{var div; $（< p>）.text（jQuery v+ $ .fn.jquery）.appendTo （document.body）; //连接一个处理程序*不使用jQuery，使用DOM0和DOM2两种方式div = document.getElementById（theDiv）; div.onclick = dom0Handler; if（div.addEventListener）{div .addEventListener（'click'，dom2Handler，false）;} else if（div.attachEvent）{div.attachEvent（'onclick'，dom2Handler）;} //使用jQuery $（＃theDiv）连接处理程序。 （jqueryHandler）; //当我们的按钮是clicke时触发点击click（function（）{display（Triggering< code> click< / code>：）; $（ ＃theDiv）点击（）。 }）;函数dom0Handler（）{display（DOM0 handler triggered）; } function dom2Handler（）{display（DOM2 handler triggered）; } function jqueryHandler（）{display（jQuery handler triggered）; }函数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>请尝试直接点击此div，然后使用按钮通过jQuery的< code>点击发送点击< / code> < / div>< input type ='button'id ='theButton'value ='Click Me'>

I found that in Google+ Project's page that buttons are all made from divs like:

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

I'd like to know, is this just for semantic, all does it influence the style or event handle of the div? I tried to simulate click the button with JQuery click, but it doesn't work.

解决方案

It tells accessibility (and other) software what the purpose of the div is. More here in the draft role attribute specification.

Yes, it's just semantic. Sending a click event to the button should work.

---

An earlier version of this answer (back in 2011) said:

...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.

...and provided the sample code and output below.

I cannot replicate the output now (two years later). Even if I go back to earlier versions of jQuery, they all trigger jQuery handlers, DOM0 handlers, and DOM2 handlers. The order isn't necessarily the same between a real click and jQuery's click function. I've tried jQuery versions 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, and more recent releases such as 1.7.1, 1.8.3, 1.9.1, and 1.11.3 (the current 1.x release as of this writing). I can only conclude that it was a browser thing, and I don't know what browser I was using. (Right now I'm using Chrome 26 and Firefox 20 to test.)

Here's a test which shows that indeed, jQuery handlers, DOM0 handlers, and DOM2 handlers are all (as of this writing!) triggered by jQuery's 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'>

这篇关于角色=按钮是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！