通過焦點隱藏的燼元素事件阻塞點擊事件

我有一個奇怪的難題。通過焦點隱藏的燼元素事件阻塞點擊事件

看起來，當一個元素被一個聚焦事件隱藏時，它不能附加正確觸發焦點的相應點擊事件。例如，如果代碼如下，<a>標籤觸發輸入上的聚焦事件，並且後面的代碼變爲_focused至false，則從不觸發selectOpts事件。它似乎只有在a標籤由於聚焦而隱藏時纔會發生。

奇怪的是，如果我只是display:none它不會觸發selectOpt動作，如何隱藏a標記並不重要。

這裏是我的代碼：

<div class="dropdown"> 
    {{input value=value class='form-control' focus-in="focused" focus-out="unfocused" }} 
    {{#if _focused}} 
     <ul class='dropdown-menu'> 
      {{#each _filteredOptions as |opt|}} 
       <li><a href="#" {{action "selectOpt" opt}}>{{opt}}</a></li> 
      {{/each}} 
     </ul> 
    {{/if}} 
</div>

下面是該問題的一個餘燼twilldle。

https://ember-twiddle.com/6bbdb669d19d7a498e645bb0297f1b46?openFiles=templates.components.input-autocomplete.hbs%2Ctemplates.components.input-autocomplete.hbs

爲了得到它顯示的問題集中在文本區域，然後儘量選擇出現的輸入下面的鏈接之一。應該發生的事情是，當你選擇鏈接時，用輸入值填充輸入字段。

來源

2017-01-23 Chris Rice

如果'_focused'爲false，它的所有子元素都不會被渲染，所以這個動作不能被觸發。爲什麼不使用'ember-power-select'？ – ykaragol

當元素被點擊_focused是真實的。 Power select不會自動完成輸入字段。 –

您只能使用focus-in而不是focus-in和focus-out。所以當你點擊輸入focus-in事件觸發器並將_focused設置爲true時。然後，在行動selectOpt你設置值，並在那之後設置屬性_focused爲false。

<div class="dropdown"> 
{{input value=value class='form-control' focus-in='focused' }} 
{{#if _focused}} 
    <ul class='dropdown-menu'> 
     {{#each options as |opt|}} 
      <li> 
      <a href="#" {{action "selectOpt" opt}}>{{opt}}</a> 
      </li> 
     {{/each}} 
    </ul> 
{{/if}}

輸入autocomplete.js

actions: { 
    focused() { 
     this.set('_focused', true); 
    }, 
    selectOpt(opt) { 
     console.log(opt); 
     this.set('value', opt); 
     this.set('_focused', false); 
    } 
}

我並沒有包括所有的代碼輸入自動完成它一樣exxept動作之前。此外，我使用選項陣列insted您的過濾器，因爲單擊輸入時沒有得到任何結果。

來源

2017-01-23 19:24:41

用戶不需要選擇一個值。這只是一個建議的自動完成字段。 –

通過焦點隱藏的燼元素事件阻塞點擊事件

回答

相關問題