role ="button"是什么意思吝啬的? [英] What does role="button" mean?

问题描述

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

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

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

我试图模拟一个按钮"click"，带有jQuery click 事件，但是没有用.

解决方案

它告诉可访问性(和其他)软件 div 的目的是什么.草稿 role 属性规范中的更多信息.>

是的，这只是语义上的.将 click 事件发送到按钮应该起作用.

---

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

...但是jQuery的 click 函数不能执行此操作；它仅触发已使用jQuery 连接到元素的事件处理程序，而不触发以其他方式连接的处理程序.

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

我现在不能复制输出(两年后).即使我返回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);//以DOM0和DOM2的方式(不是)使用jQuery连接处理程序div = document.getElementById("theDiv");div.onclick = dom0Handler;如果(div.addEventListener){div.addEventListener('click'，dom2Handler，false);} else if(div.attachEvent){div.attachEvent('onclick'，dom2Handler);}//使用jQuery连接处理程序$(#theDiv").click(jqueryHandler);//点击我们的按钮时触发点击$(#theButton").click(function(){display(触发< code> click</code> ;:")；$(#theDiv").click();});函数dom0Handler(){display("DOM0处理程序已触发");}函数dom2Handler(){display(触发DOM2处理程序");}函数jqueryHandler(){display(触发jQuery处理程序");}功能显示(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> click</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 purposes, or does it influence the style or event handling of the <div>?

I tried to simulate a button "click" with the jQuery click event, but it didn'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'>

这篇关于role ="button"是什么意思吝啬的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！