[SOLVED] e.stopPropagation() is not working!?

Questions
1

I have a link list with namnes that loads a new page if you click on the li.

And besides the name I have a heart icon.

And when I click on the heart I want to prevent the default behavior on the link and just open an alert instead.
And if I click anywhere else on the li then it should load the page as expected.

So I have tried to with

e.stopPropagation()

but it is not working, it still loads the page?

I have this structure now.

<a href="/klasslistor3/>  
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Anna Andersson</div>
          <div class="item-after">
          
		<i class="f7-icons fodelsedag">heart_fill</i>
     
          </div>
        </div>
         
      </div>
    </li>
    </a>

And here is the js code.

$$(document).on('click', '.fodelsedag', function (e) { 
      
e.stopPropagation() //this is not working....
app.dialog.alert("test alert")


});

Thanks for any input!

2

Try

$$(document).on('click', '.fodelsedag', function (e) { 
e.stopImmediatePropagation()      
e.stopPropagation()
// pay attention to last "true" argument
}, true);
1 Like
3

Я не знаю, почему автор пометил данную тему как “решено”, только что протестировал: не работает. Роутер в любом случае переходит на другую страницу и это событие не остановить.

Пока такое решение:
<a href="#" data-url="...">...</a>

при клике вручную перенаправлять роутер.

4

Смотри тут последний абзац про prevent-router http://framework7.io/docs/view.html#linking-between-pages-views

5

Это не то, это про то, что роутер не будет обрабатывать ссылки, если они имеют класс prevent-router. В посте разговор про такое в F7:

<a href="/page1/">
<div>какой-то контент, клик по которому перебрасывает на /page1/</div>
<span @click="click">click me</span>
</a>

Задача: клик по span не заставляет router переходить на “/page1”. Google говорит, что для перехвата события (и это действительно работает) нужно делать так:

 click: function (e) {
     e.stopPropagation();
 }

Событие действительно перехватывается, но роутер все же переходит на “/page1”. Возможно, ваше решение верное:

$$(document).on('click', '.fodelsedag', function (e) { 
e.stopImmediatePropagation()      
e.stopPropagation()
// pay attention to last "true" argument
}, true);

Нужно внимательно его протестировать еще раз.

6

Есть ли подобное решение для vue?