пространство имен события не работает в событии mouseup

Question

Я пытаюсь достичь event.namespace на mouseup event, но это не похоже на работу, оно всегда регистрирует undefined

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
$(document).on("mouseup", function(event) {
  console.log(event)
  banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
})


$(document).on("mouseup.namespace", function(event) {
  console.log(event.namespace)
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

Вот скрипка того, что я попробовал: http://jsfiddle.net/xpvt214o/221833/ Есть идеи?

Answer 1

Вы делаете это неправильно.Попробуйте это.

var banner = $("#banner-message")
var button = $("button")

$(document).on("namespace.someNamespace", function(event) {
  console.log(event);
  console.log(event.namespace);
  banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
});

$(document).on("mouseup", function(event) {
  $(document).trigger('namespace.someNamespace');
});

Вам необходимо нормальное событие (например, mouseup), чтобы вызвать событие пространства имен.

Answer 2

event.namespace используется плагинами jQuery для организации пользовательских событий

event.namespace |Документация по jQuery API

Скорее всего, это будет использоваться в первую очередь авторами плагинов, которые хотят обрабатывать задачи по-разному в зависимости от используемого пространства имен событий.

Что бы вы ни пыталисьдля этого кажется, что пространство имен - это не тот инструмент, который вы ищете.

Answer 3

вам нужно вызвать mouseup.namespace пример здесь https://api.jquery.com/event.namespace/

также измените ваше имя пространства имен с mouseup.namespace, так как это вызовет событие дважды

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
$(document).on("mouseup", function(event) {
  console.log(event);
  banner.toggleClass("alt");
  $(this).trigger("mouseup.namespace");
})


$(document).on("mouseup.namespace", function(event) {
  console.log(event.namespace);
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>