点击一个类按钮

Javascript click a class button

本文关键字:一个 按钮      更新时间:2023-09-26

所以这只是一个小的个人项目,我正在使用awesomium在。net工作。在awesomium中,我打开了这个浏览器然后我想点击这个按钮上面有这个代码

<a class="buttonright" >&nbsp;Bump&nbsp;</a>

但是考虑到它是一个类而不是一个按钮,我很难找到一种方法来"点击"它。我的计划是使用javascript在awesomium点击它,但也许我接近这个从错误的方向?

谢谢

更新:
在进行了大量的注释(来回)之后,我设置了一个具有此代码的工作版本的小提琴(这里的代码也可以工作,但需要一些调试)。小提琴中的eventTrigger函数已经去掉了所有注释,但是我添加了这个函数的一个示例用法,其中大量地点缀了注释。
浏览它,分叉它,尝试并熟悉其中使用的代码和概念。玩得开心:

这是小提琴


如果你所说的"找到一种方法来点击它"的意思是:如何通过编程方式点击这个锚点元素,那么你可以使用:

这是一个x浏览器,稍微冗长但全面的方法:

var eventTrigger = function(node, event)
{
    var e, eClass,
        doc = node.ownerDocument || (node.nodeType === (document.DOCUMENT_NODE || 9) ? node : document);
        //after checking John Resig's Pro JavaScript Techniques
        //the statement above is best written with an explicit 9
        //Given the fact that IE doesn't do document.<NODE_CONSTANT>:
        //doc = node.ownerDocument || (node.nodeType === 9 ? node : document);
    if (node.dispatchEvent)
    {//dispatchEvent method is present, we have an OK browser
        if (event === 'click' || event.indexOf('mouse') >= 0)
            eClass = 'MouseEvents';//clik, mouseup & mousedown are MouseEvents
        else
            eClass = 'HTMLEvents';//change, focus, blur... => HTMLEvents
        //now create an event object of the corresponding class
        e = doc.createEvent(eClass);
        //initialize it, if it's a change event, don't let it bubble
        //change events don't bubble in IE<9, but most browsers do
        //e.initEvent(event, true, true); would be valid, though not standard
        e.initEvent(event, !(event === 'change'), true);
        //optional, non-standard -> a flag for internal use in your code
        e.synthetic = true;//mark event as synthetic
        //dispatch event to given node
        node.dispatchEvent(e, true);
        //return here, to avoid else branch
        return true;
    }
    if (node.fireEvent)
    {//old IE's use fireEvent method, its API is simpler, and less powerful
        //a standard event, IE events do not contain event-specific details
        e = doc.createEventObject();
        //same as before: optional, non-standard (but then IE never was :-P)
        e.synthetic = true;
        //~same as dispatchEvent, but event name preceded by "on"
        node.fireEvent('on' + event, e);
        return true;//end IE
    }
    //last-resort fallback -> trigger any directly bound handler manually
    //alternatively throw Error!
    event = 'on' + event;
    //use bracket notation, to use event's value, and invoke
    return node[event]();//invoke "onclick"
};

在您的示例中,可以通过查询特定元素的DOM来使用此函数,如下所示:

var elem = document.querySelector('.buttonright');//IE8 and up, will only select 1 element
//document.querySelectorAll('.buttonright'); returns a nodelist (array-like object) with all elements that have this class
eventTrigger(elem, 'click');

应该有点击锚点元素

的效果

如果您正在寻找一种方法来处理此元素(具有buttonright类的锚)上的单击事件,那么一个简单的事件侦听器就是您所需要的:

document.body.addEventListener('click', function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a' && target.className.match(/'bbuttonright'b/))
    {//clicked element was a link, with the buttonright class
        alert('You clicked a button/link thingy');
    }
}, false);

这是最干净的方式(一个事件监听器处理所有点击事件)。当然,您也可以将处理程序绑定到特定的元素:

var buttons = document.querySelectorAll('.buttonright'),
    handler = function(e)
    {
        alert('Clicked!');
    };
for (var i=0;i<buttons.length;++i)
{
    buttons[i].addEventListener('click',handler, false);
}

根据你想如何处理事件,有很多方法可以选择。

最简单的是:

<script type="text/javascript">
  function buttonRight_onclick(event, sender)
  {
     alert("HEY YOU CLICKED ME!");
  }
</script>

<a class="buttonright" click="buttonRight_onclick(event, this)">

而如果你使用的是像jQuery这样的框架,你可以这样做:

<script type="text/javascript">
  $(document).ready(function() {
    $(".buttonright").on("click", function(event) {
      alert("HEY YOU CLICKED ME!");
    });
  });
</script>
<a class="buttonright" >Bump</a>
<a class="buttonright" >Also bump</a>
<script type="text/javascript">
  function Button_onclick(event, sender)
  {
     alert("Button Clicked!");
  }
</script>
    <a class="Button" click="Button_onclick(event, this)">