Question

IE7-8上出现问题。这是一个简单的演示：

<html>
  <head>
    <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Selenium's trigger from scripts/htmlutils.js
      function triggerEvent(element, eventType, canBubble, controlKeyDown, 
                            altKeyDown, shiftKeyDown, metaKeyDown)
      {
        canBubble = (typeof(canBubble) == undefined) ? true : canBubble;
        if (element.fireEvent && element.ownerDocument && 
            element.ownerDocument.createEventObject) { // IE
          var evt = createEventObject(element, controlKeyDown, altKeyDown, 
                                      shiftKeyDown, metaKeyDown);    
          element.fireEvent('on' + eventType, evt);
        }
        else {
          var evt = document.createEvent('HTMLEvents');

          try {
            evt.shiftKey = shiftKeyDown;
            evt.metaKey = metaKeyDown;
            evt.altKey = altKeyDown;
            evt.ctrlKey = controlKeyDown;
          } catch (e) {
            // On Firefox 1.0, you can only set these during initMouseEvent
            // or initKeyEvent we'll have to ignore them here
            LOG.exception(e);
          }

          evt.initEvent(eventType, canBubble, true);
          element.dispatchEvent(evt);
        }
      }

      function createEventObject(element, controlKeyDown, altKeyDown, 
                                 shiftKeyDown, metaKeyDown) 
      {
         var evt = element.ownerDocument.createEventObject();
         evt.shiftKey = shiftKeyDown;
         evt.metaKey = metaKeyDown;
         evt.altKey = altKeyDown;
         evt.ctrlKey = controlKeyDown;
         return evt;
      }

      function triggerBySelenium() {
        var elem = document.getElementById('sel1');
        triggerEvent(elem, 'change');
      }

      function triggerByJQuery() {
        $('#sel1').trigger('change');
      }

      $(function() {
        $('#sel1').bind('change', function() {
           alert('jQuery\'s handler!');  
        });
      });
    </script>
  </head>
  <body>
    <select id="sel1" onchange="alert('Native handler!');">
      <option value="1">text 1</option>
      <option value="2">text 2</option>
    </select>
    <br/>
    <a href="#" onclick="triggerBySelenium();">Fire event by Selenium</a><br/>
    <a href="#" onclick="triggerByJQuery();">Fire event by jQuery</a>
  </body>
</html>

如果你点击第一个链接，只会显示一个提示，任何想法为什么？

Answer 1

试试这个：

    <html>
  <head>
    <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Selenium's trigger from scripts/htmlutils.js
      function triggerEvent(element, eventType, canBubble, controlKeyDown, 
                            altKeyDown, shiftKeyDown, metaKeyDown)
      {
        canBubble = (typeof(canBubble) == undefined) ? true : canBubble;
        if (element.fireEvent && element.ownerDocument && 
            element.ownerDocument.createEventObject) { // IE
          var evt = createEventObject(element, controlKeyDown, altKeyDown, 
                                      shiftKeyDown, metaKeyDown);    
          element.fireEvent('on' + eventType, evt);
        }
        else {
          var evt = document.createEvent('HTMLEvents');

          try {
            evt.shiftKey = shiftKeyDown;
            evt.metaKey = metaKeyDown;
            evt.altKey = altKeyDown;
            evt.ctrlKey = controlKeyDown;
          } catch (e) {
            // On Firefox 1.0, you can only set these during initMouseEvent
            // or initKeyEvent we'll have to ignore them here
            LOG.exception(e);
          }

          evt.initEvent(eventType, canBubble, true);
          element.dispatchEvent(evt);
        }
      }

      function createEventObject(element, controlKeyDown, altKeyDown, 
                                 shiftKeyDown, metaKeyDown) 
      {
         var evt = element.ownerDocument.createEventObject();
         evt.shiftKey = shiftKeyDown;
         evt.metaKey = metaKeyDown;
         evt.altKey = altKeyDown;
         evt.ctrlKey = controlKeyDown;
         return evt;
      }

      function triggerBySelenium() {
         $('#sel1').trigger('change');
      }

      function triggerByJQuery() {
        $('#sel1').trigger('change');
      }

      $(function() {
        $('#sel1').bind('change', function() {
           alert('jQuery\'s handler!');  
        });
      });
    </script>
  </head>
  <body>
    <select id="sel1" onchange="alert('Native handler!');">
      <option value="1">text 1</option>
      <option value="2">text 2</option>
    </select>
    <br/>
    <a href="#" onclick="triggerBySelenium();">Fire event by Selenium</a><br/>
    <a href="#" onclick="triggerBy();">Fire event by jQuery</a>
  </body>
</html>

通过fireEvent触发'change'事件时未调用jQuery事件

1 个答案: