admin 管理员组

文章数量: 1086019

I have a javascript code that is given below that is ES6 patible however IE 11 does not support this. What would be the replacement code for this such that it works across all browsers?

[...document.querySelectorAll('.row')]

Im using this for 'click' event handling:

Array.prototype.slice.call(document.querySelectorAll('.row'))
    .forEach(function(header) {
      return header.addEventListener('click', function(e) {
        headerClick(e, header, header.querySelector('.exy'))
      });
    });

I have a javascript code that is given below that is ES6 patible however IE 11 does not support this. What would be the replacement code for this such that it works across all browsers?

[...document.querySelectorAll('.row')]

Im using this for 'click' event handling:

Array.prototype.slice.call(document.querySelectorAll('.row'))
    .forEach(function(header) {
      return header.addEventListener('click', function(e) {
        headerClick(e, header, header.querySelector('.exy'))
      });
    });
  • javascript
  • internet-explorer-11
Share Improve this question edited Aug 3, 2017 at 8:23 RobG 148k32 gold badges179 silver badges214 bronze badges asked Aug 1, 2016 at 10:05 NeophileNeophile 5,89017 gold badges62 silver badges107 bronze badges 3
  • Array.prototype.slice.call(document.querySelectorAll('.row')) – gcampbell Commented Aug 1, 2016 at 10:08
  • 3 You could just use Babel. – gcampbell Commented Aug 1, 2016 at 10:09
  • Instead of babel, use abstraction and upgrade as you drop support for older browsers. Javascript is scripting but moving to where you soon always have to pile. I'ts not rocket science but we're making it bee just that... – Asken Commented Nov 10, 2016 at 7:45
Add a ment  | 

1 Answer 1

Reset to default 7

For all browsers, you can use Array.prototype.slice via call or apply (it works on any array-like object):

Array.prototype.slice.call(document.querySelectorAll('.row'))

About your updated question:

Im using this for 'click' event handling:

Array.prototype.slice.call(document.querySelectorAll('.row'))
    .forEach(function(header) {
      return header.addEventListener('click', function(e) {
        headerClick(e, header, header.querySelector('.exy'))
      });
    });

I wouldn't use querySelectorAll for this at all, I'd use event delegation. Presumably all of those .row elements are inside a mon container (ultimately, of course, they're all in body, but hopefully there's a container "closer" to them than that). With event delegation, you do this:

  • Hook click just once, on the container

  • When a click occurs, check to see if it passed through one of your target elements en route to the container

For your quoted code, that looks something like this:

// A regex we'll reuse
var rexIsRow = /\brow\b/;
// Hook click on the container
document.querySelector("selector-for-the-container").addEventListener(
    "click",
    function(e) {
        // See if we find a .row element in the path from target to container
        var elm;
        for (elm = e.target; elm !== this; elm = elm.parentNode) {
            if (rexIsRow.test(elm.className)) {
                // Yes we did, call `headerClick`
                headerClick(e, elm, elm.querySelector('.exy'));
                // And stop looking
                break;
            }
        }
    },
    false
);

On more modern browsers, you could use elm.classList.contains("row") instead of the regular expression, but sadly not on IE9 or earlier.

That said, rather than maintaining a separate codebase, as gcampbell pointed out you could use ES6 (ES2015) features in your code and then transpile with a transpiler that converts them (well, the ones that can be converted, which is a lot of them) to ES5 syntax. Babel is one such transpiler.

本文标签： javascriptES6 spread syntax IE not supportedStack Overflow

版权声明：本文标题：javascript - ES6 spread syntax IE not supported - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744018846a2519429.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。