Блог

Главная - Вопросы по программированию - событие dijit / form / onClick кнопки

событие dijit / form / onClick кнопки

#button #onclick #dojo

#кнопка #onclick #dojo

Вопрос:

Я застрял..Событие OnClick не запускается.. Что я пропустил? Кнопка создана, я ее вижу, но события нет.

 <html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>
 </head>
<body>
<script>

 require(["dijit/form/Button","dojo/domReady!"], function(Button){
   var b = new Button({value:"clickMe"});
    b.placeAt('btnDiv');
    var x=b.on("onClick", function(){alert('clicked'); });
  })

</script>
  <div id='btnDiv'/>
</body>
</html>

Ответ №1:

Есть две ошибки. Во-первых, название события нужно использовать только как,

button.on("click", function() {...}); // НЕ button.on(«onClick«, функция() {…});

и, во-вторых, значение не принимается для виджета button. Это атрибут «label». Итак, попробуйте этот способ:-

 require(["dijit/form/Button","dojo/domReady!"], function(Button){
  var b = new Button({label:"clickMe"});
  b.placeAt('btnDiv');
  var x=b.on("onClick", function(){alert('clicked'); });
})

Темы не используются, поэтому виджет будет занимать всего несколько пикселей рядом с обычной HTML-кнопкой, которую вы бы смотрели на экране. Если вы попытаетесь щелкнуть там, если вы не собираетесь использовать атрибут label. Если вы просто внесете вышеуказанные изменения, вы увидите надпись отдельно вокруг кнопки HTML, при нажатии на которую будет вызвана вышеупомянутая функция.

Как это выглядит без темы?

введите описание изображения здесь

Я добавил красную рамку и стрелку для выделения здесь. Вы увидите только этот текст. Если щелкнуть по нему, то событие будет вызвано, а не при нажатии кнопки HTML. Потому что событие привязано к виджету, а не к HTML-элементу. Вот почему важно применить тему, чтобы избежать этой путаницы.

Дополнительный:

Как добавить тему? — Просто добавьте эти следующие css в начале и добавьте class="claro" в тег body.

 <style type="text/css">
  @import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css";
  @import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css";
</style>

Как это теперь выглядит с темой:-
введите описание изображения здесь

Посмотрите эту демонстрацию — http://jsfiddle.net/D5kLg /