javascript - 中止 Meteor.js 中的链接重定向

Question

大家好，我有一个小问题，

我在设置图标上有一个单击事件，但设置图标位于链接内，因此当我单击该图标时，会调用单击事件，但我看不到任何内容，因为我被重定向到下一页，所以我需要一种方法单击图标而不触发链接

<template name="startseite">
    <div id="viewport">
        {{#each gebiet}}
        <div id="viewmode">
    this is the link--> <a id="link" href="/straßen/{{this._id}}">
                <div id="gebietsCard">
                    <ul id="gebieteListe">
      and here the icon -->  <li id="settings"><i id="setting" class="material-icons md-24 md-light">settings</i></li>
                        <li id="überschrift">{{Gebietsname}}</li>
                        <li>{{Gebietsnummer}}</li>
                        <li>{{Ort}}</li>
                    </ul>
                </div>
            </a>
        </div>
        <div id="editmode">
            <div id="gebietsCardEdit">
                test
            </div>
        </div>
        {{/each}}
    </div>
</template>

我的js:

    Template.startseite.events({
          'click #settings': function(){
              console.log("geklickt")
            $("#editmode").css('display', 'inline');
            $("#viewmode").css('display', 'none');
    }    
}); 

我希望你们能帮助我，谢谢大家;)

Answer 1

这可以通过以下方式轻松完成:

Template.startseite.events({
  'click #settings': function(e){
    e.stopPropagation();
    e.preventDefault(); // I am not sure if this is needed, try it yourself and remove if it is no use

    $("#editmode").css('display', 'inline');
    $("#viewmode").css('display', 'none');
  }
}

您可以在此处找到有关这两个函数的更多信息:

• https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
• https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault