Почему это событие не работает на Android и iPhone? - PullRequest
1 голос
/ 13 ноября 2011

Я использую библиотеку Prototype JavaScript для создания динамических выпадающих меню. Перед загрузкой страницы к операторам выбора с идентификатором, id_bran и id_gen, не добавляется событие. Как видно, init_image вызывается при загрузке страницы, а событие onclick присоединяется к оператору выбора.

Это прекрасно работает на рабочих столах, где я могу использовать мышь для выполнения события щелчка. Однако он не работает в моих браузерах 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);
         }
      });
    };

1 Ответ

0 голосов
/ 03 мая 2013

Прежде всего, вы принудительно вводите события и событие загрузки, которые могут привести к потенциальным кросс-браузерным проблемам. Если вы используете 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/

...