I’m experiencing a strange thing… Using the click intercepting method I posted above, I’m now trying to just open a site link in the device native browser. For some reason I can only get this to work if the link tag does not contain anything other than text. Any ideas @nolimits4web ?
<li>
<!-- This works -->
<a href="{{url}}" class="link external">External Link</a>
<!-- This does not work -->
<a href="{{url}}" class="item-link item-content external">
<div class="item-media"><img src="{{icon}}" width="44px"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{name}}</div>
</div>
<div class="item-subtitle">{{urldisplay}}</div>
</div>
</a>
</li>
The problem seems to be that a click event is not fired on an <a> tag if if wraps around another element. How can I combat this?
There is no any difference in both of this links, i mean there is no something specific about it. Actually F7 has built-in handler for external links with InAppBrowser. Try to remove your code you use to handle such links and just add target="_system" to your external links
I can’t believe I spent the best past of the day hacking at this. The problem with using the $$(document).on('click', function (e) {} method I had to intercept the clicks is that e.target was the immediate element under the click and not always the link element with the href.
I saw that F7 had some built in external link handling but I couldn’t get this to work. So target="_system" was what I needed… I could have saved so much time! Thank you, I’ll know for next time.
Yes, global events are tricky, in this case you may use second argument to pass context:
$$(document).on('click', 'a.external', function (e) {
// e.target still can be some element that is inside of a link
// but "this" here always refer to a.external
var url = $(this).attr('href');
});
I’ve had a similar problem. I use arrow functions which override “this”. In jquery I could use event.currentTarget. Is that something that could be added to Dom7?
It won’t be added to Dom7 as it will bring just extra complexity to the library code. Solution is simple, just don’t use arrow functions when you need “this”