Question

我正在使用Prototype JavaScript库来创建动态下拉菜单。在加载页面之前，没有事件附加到id为id_bran和id_gen的select语句。可以看出，在页面加载时调用init_image，并且onclick事件附加到那些select语句。

这在我可以使用鼠标执行click事件的桌面上工作正常。但它在我的Android和iPhone浏览器中不起作用。页面加载时，将调用init_image并执行getval函数。但是，稍后，当我在下拉菜单中进行选择时，onclick事件不会调用getval函数。因此我确信原型库正在我的Android和iPhone上工作，因为ajax请求是在页面加载时生成的，但随后它失败了。这里出了什么问题？

<!--
   MY HTML body->onload
   The init_image is called the first time when the page is loaded
-->
<body onLoad="init_image();">


//Javscript function called on page load
function init_image() {
    getval();
    //Assigning the event to id_gen and id_bran for mouse clicks
    document.getElementById("id_gen").onclick = getsize;
    document.getElementById("id_bran").onclick = getsize;
};


//Javascript function called on page load and during mouse click on the select 
//statement with id = id_bran and id_gen
function getval() {
     ur = 'szv/c1--'+$F('id_bran')+'/g1--'+$F('id_gen');
     new Ajax.Request(ur,
     {
         method:'get',
         onSuccess: function(transport){
           var response = transport.responseText;
           $('id_val').replace(response);
         }
      });
    };

Answer 1

首先，您是强制注入事件和加载事件，这可能会导致潜在的跨浏览器问题。如果您正在使用prototype.js，请依赖于跨浏览器的本机方法：

<script type="text/javascript">
document.observe("dom:loaded", function() {

 .. your code here ..
});
</script>

然后再次正确本地化和观察点击事件，而不是：

document.getElementById("id_gen").onclick = getsize;

使用类似：

$('id_gen').on('click', getsize(e).bindAsEventListener(this));  // for prototype 1.7 branch

或者：

$('id_gen').observe('click', getsize(e).bindAsEventListener(this)); // for prototype 1.6 branch

同样通过设置传递e变量，你的getsize()函数会在那里有Event对象，所以你可以阻止它的原生行为（比如导致＃）：

function getsize(e) {

    e.stop();
    .. your code here ..
}

此外，如果你将整个逻辑锁定到类并为它创建一个对象，那将是最好的，而且更少臃肿...但这是一个完全不同的故事... :)

prototype.js是一个强大的工具，但需要一些小心。我建议你阅读一些关于框架的基础知识，然后再阅读API文档：

http://prototypejs.org/learn/

http://api.prototypejs.org/

为什么这个onclick事件无法在Android和iPhone上运行？

1 个答案: