IE8切片调用问题-Array.prototype.slice-'这'不是Javascript对象

IE8 slice call issue - Array.prototype.slice - 'this' is not a Javascript object

本文关键字：不是 对象 Javascript slice- 调用 切片 问题 -Array prototype IE8      更新时间：2023-09-26

这是一个比以前问的问题更复杂的问题，尝试使用以前给出的响应，但它不起作用。

这是代码

(function () {
    function init() {
        var speed = 330,
            easing = mina.backout;
       [].slice.call(document.querySelectorAll('.grid > a')).forEach(function (el) {
            var s = Snap(el.querySelector('svg')), path = s.select('path'),
                pathConfig = {
                    from: path.attr('d'),
                    to: el.getAttribute('data-path-hover')
                };
            el.addEventListener('mouseenter', function () {
                path.animate({ 'path': pathConfig.to }, speed, easing);
            });
            el.addEventListener('mouseleave', function () {
                path.animate({ 'path': pathConfig.from }, speed, easing);
            });
        });
    }
    init();
})();

只要选择器（'.grid > a'）符合CSS2，这应该可以正常工作。因为querySelectorAll只支持IE8中的css2选择器。

此外，你不需要调用slice方法，只需像这个一样直接使用for each

   [].forEach.call(document.querySelectorAll('.grid > a'), function (el) {
        var s = Snap(el.querySelector('svg')), path = s.select('path'),
            pathConfig = {
                from: path.attr('d'),
                to: el.getAttribute('data-path-hover')
            };
        el.addEventListener('mouseenter', function () {
            path.animate({ 'path': pathConfig.to }, speed, easing);
        });
        el.addEventListener('mouseleave', function () {
            path.animate({ 'path': pathConfig.from }, speed, easing);
        });
    });

更新-[].forEach与>=IE9 兼容

var nodeArray = [].slice.call(document.querySelectorAll('.grid > a'));
for (var i = 0; i < nodeArray.length; i++) {
    var el = nodeArray[i];
    var s = Snap(el.querySelector('svg')),
        path = s.select('path'),
        pathConfig = {
            from: path.attr('d'),
            to: el.getAttribute('data-path-hover')
        };
    el.addEventListener('mouseenter', function () {
        path.animate({
            'path': pathConfig.to
        }, speed, easing);
    });
    el.addEventListener('mouseleave', function () {
        path.animate({
            'path': pathConfig.from
        }, speed, easing);
    });
}
相关文章：