CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8
vogomatix
vogomatix

Reputation: 5041

IE8 click event issue

I have a JQuery (1.8) Datatable (1.10) with some fields which are in-place editable i.e. clicking on them creates an input element where new data can be typed to update the table.

In IE8 (but not in Chrome or Firefox, I do not have later IE versions), pressing return whilst in an editable field also seems to generate a 'click' event to a button outside the table. This is unfortunate as this button opens a Bootstrap modal dialog.

Why is this likely to be happening and what is the best way to solve it? AFAICT there is no click handler for the input field (there is a keyup handler which returns false to stop propagation). At the moment I am assuming this is some sort of issue involving how IE8 does events differently but I am not sure how it is getting to generate a click event on this button.

The input event listener is:

_setupEventListeners: function (tableEditor) {
  // Listen for key presses to trigger any finalisation actions
  this.element.on('keyup', function (event) {
  switch (event.keyCode) {
    // return or enter keys
    case  KEYCODE_ENTER:
      tableEditor.saveAndClose();
      break;
     // esc key
     case  KEYCODE_ESCAPE:
       tableEditor.revertAndClose();
       break;
     }
     // may be overkill as JQ does stopPropagation if false returned??
     event.stopPropagation();
     (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
     return false;
     });
  },

The button event handler is:

$(tableId + '-addRow').click(function (event) {
    console.log("AddRow click");
    // modal opened here....
});

Upvotes: 3

Views: 335

Answers (1)

Chris Lear
Chris Lear

Reputation: 6742

See http://tjvantoll.com/2013/05/22/why-are-enter-keypresses-clicking-my-buttons-in-ie/

Specifically

Internet Explorer has an annoying quirk that still exists as of IE10: submit buttons can be clicked when Enter is pressed in a textbox, even when no is present.[...] No other browsers exhibit this behavior.

Short fix: make your button type='button' rather than type='submit'

Upvotes: 4

Related Questions