0

私は、sencha Editor (Sencha Animator) を使用して作成されたこの Web サイトを持っています。

彼らは実際には IE をサポートしていないので、クライアントのほとんどがまだ IE7+ を使用しているため、カスタム編集することにしました。

主な問題は、Chrome、Safari、FF、および IE8/9 で正常にロードされるようになったことですが、どのイベントも機能していないようです。

私は最初に条件付きチェック（ここで見つけました）を実行して、それがどのブラウザであるかを確認し、そのようなイベントを追加しようとしました：

function bindEvent(el, eventName, eventHandler) {
   if (el.addEventListener){
       el.addEventListener(eventName, eventHandler, false); 
   } else if (el.attachEvent){
       el.attachEvent("on"+eventName, eventHandler);
   }
}

どういうわけか、このコードは突然壊れます

if (el.addEventListener) {

その後、待って、jQuery にはおそらくこのビルドが組み込まれていると思いました。そこで、Google から jQuery の CDN を追加しました。

私のJSで追加しました

$(document).ready(function () {
   // load my start function here
});

それはうまくいくので、少なくともページはすべてのコンテンツをロードします。

今、私は使いたい

$(element).click(function () {
   alert('hello');
});

しかし、それはIEでもFirefoxでもまったく機能しません（マウスアップも機能しません）（この場合、IEはFFよりもうまく機能します）

私はもう手がかりがありません.このIE全体がすべてを壊し、Chromeでのみ機能するサイトは不可能です...これは本当に本当にイライラします:P

サイトへのリンクはここにあります: Link

完全な JS コードは次のとおりです。

if (typeof (AN) === 'undefined') {
   AN = {};
}
AN.Controller = {
   scenes: {},
   scenesArray: [],
   currentSceneID: -1,
   olElement: null,
   events: {},
   useOrmma: false,
   setConfig: function (configData) {
      this.events = configData.events;
      this.olElement = document.getElementById(configData.parentId);
      var liElements = this.olElement.children;
      if (configData.ormma) {
        this.useOrmma = true;
    }
    var scene;
    for (var i = 0; i < configData.scenes.length; i++) {
        scene = configData.scenes[i];
        scene.element = liElements[i];
        this.scenes[scene.id] = scene;
        this.scenesArray.push(scene);
    }
    this.setupListeners();
    this.startSceneByID(this.scenesArray[0].id);
},
runningAnimationCount: 0,
browser: 'webkit',
setupListeners: function () {
    var me = this;
    var eventName = "webkitAnimationEnd";
    if (document.body.style.MozAnimationName !== undefined) {
        eventName = "animationend";
        this.browser = "moz";
    }

    function addMousemoveListenerTo(scene) {
        /*bindEvent(scene.element, 'mousemove', function (event) {
            scene.mousemoveAction(me, event);
        }, false);*/

    }
    var scene;
    for (var i = 0; i < this.scenesArray.length; i++) {
        scene = this.scenesArray[i];
        if (scene.mousemoveAction) {
            addMousemoveListenerTo(scene);
        }
    }

    function addListenerTo(element, eventType, aFunction) {
        /*bindEvent(element, eventType, function (event) {
            aFunction(me, event);
        });*/
        $("#AN-sObj-17984").live("click", function(){
            AN.Controller.startSceneByID(2);
        });
    }

    var element, event;
    for (var i = 0; i < this.events.length; i++) {
        event = this.events[i];
        element = document.getElementById(event.id);
        addListenerTo(element, event.type, event.handler);
    }
},
onAnimationEnd: function () {
    this.runningAnimationCount--;
    if (this.runningAnimationCount === 0) {
        this.onSceneFinish();
    }
},
startSceneByID: function (sceneID) {
    var me = this;
    if (sceneID === this.currentSceneID) {
        this.scenes[sceneID].element.setAttribute('class', 'run restart');
        setTimeout(function () {
            me.runningAnimationCount = me.scenes[sceneID].animationCount;
            me.scenes[sceneID].element.setAttribute('class', 'run');
            if (me.scenes[sceneID].startAction) {
                me.scenes[sceneID].startAction(me);
            }
            if (me.scenes[sceneID].animationCount === 0) {
                me.onSceneFinish();
            }
        }, 0);
        return;
    } else if (this.currentSceneID !== -1) {
        this.scenes[this.currentSceneID].element.setAttribute('class', '');
    }
    this.runningAnimationCount = this.scenes[sceneID].animationCount;
    this.currentSceneID = sceneID;
    var nextScene = this.scenes[sceneID];
    if (this.browser === 'moz') {
        nextScene.element.setAttribute('class', 'run restart');
        var unused = nextScene.element.offsetHeight;
        nextScene.element.setAttribute('class', 'run');
    } else {
        console.log(nextScene.element);
        nextScene.element.setAttribute('class', 'run');
    }
    if (this.useOrmma) {
        this.ormmaNextScene(nextScene);
    }
    if (nextScene.startAction) {
        nextScene.startAction(this);
    }
    if (nextScene.animationCount === 0) {
        this.onSceneFinish();
    }
},
replayScene: function () {
    this.startSceneByID(this.currentSceneID);
},
onSceneFinish: function () {
    if (this.scenes[this.currentSceneID].endAction) {
        this.scenes[this.currentSceneID].endAction(this);
    }
},
goToNextScene: function () {
    var nextIndex = this.scenesArray.indexOf(this.scenes[this.currentSceneID]) + 1;
    var nextScene;
    if (nextScene = this.scenesArray[nextIndex]) {
        this.startSceneByID(nextScene.id);
    }
},
goToURL: function (aURL) {
    document.location.href = aURL;
},
ormmaNextScene: function (nextScene) {
    var currentState = ormma.getState();
    if (nextScene.dimensions.expanded) {
        var maxSize = ormma.getMaxSize();
        if (currentState !== 'expanded') {
            ormma.expand({
                x: 0,
                y: 0,
                width: maxSize.width,
                height: maxSize.height
            });
        }
        var transform = "";
        var elementHeight = nextScene.element.offsetHeight;
        var elementWidth = nextScene.element.offsetWidth;
        var y = (maxSize.height - elementHeight) / 2;
        var x = (maxSize.width - elementWidth) / 2;
        transform += " translate3d(" + Math.round(x) + "px," + Math.round(y) + "px,0)";
        if (nextScene.dimensions.fit) {
            var scaleFactor = Math.min(maxSize.width / elementWidth, maxSize.height / elementHeight);
            transform += " scale3d(" + scaleFactor + "," + scaleFactor + ",1)";
        }
        nextScene.element.style.webkitTransform = transform;
    } else {
        if (currentState === 'expanded') {
            ormma.close();
        }
        ormma.resize(nextScene.dimensions.width, nextScene.dimensions.height);
    }
}
};

function loadData() {
var configData = {
    parentId: 'AN-sObj-parentOl',
    ormma: false,
    scenes: [//lots of config data
    ]
  };
  AN.Controller.setConfig(configData);
};

$(document).ready(function() {
   loadData();
   $("area[rel^='prettyPhoto']").prettyPhoto({
      social_tools: '',
      show_title: false,
      theme: 'light_rounded'
   });
});`
4

1 に答える 1

0

コード：

function bindEvent(el, eventName, eventHandler) {
   if (el.addEventListener){
       el.addEventListener(eventName, eventHandler, false); 
   } else if (el.attachEvent){
       el.attachEvent("on"+eventName, eventHandler);
   }
}

完全に問題ありません。失敗する唯一の方法は、DOM 要素でないif (el.addEventListener)場合です。el

参照された実際のページに移動すると、いくつかの JavaScript エラーが報告されています。最初は、このコードから呼び出されたときにnullforelを渡しているために発生します。addListenerTo()

for (var i = 0; i < this.events.length; i++) {
    event = this.events[i];
    element = document.getElementById(event.id);
    addListenerTo(element, event.type, event.handler);
}

これdocument.getElementById(event.id);は、 がページ内にオブジェクトを見つけられないためです。

于 2012-09-11T13:45:11.723 に答える