eine Funktion in cesium.js aufrufen, wenn ein Ereignis

Question

Ich habe, wie unten

<div id="cesiumContainer" class="fullSize"></div> 
<div id="loadingOverlay"><h1>Loading...</h1></div> 
<div id="toolbar"><input type="search" id="search" placeholder="Search by layout name" onkeydown="search()"/></div> 

So erstellt ein div trigerred wird, wenn Enter-Taste in das Suchfeld gedrückt wird, sollte es die Funktion „Search“ nennen.

<script id="cesium_sandcastle_script"> 
function startup(Cesium) { 
'use strict'; 
var west = 68.0; 
var south = 7.0; 
var east = 89.0; 
var north = 35.0; 
var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north); 

Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.5; 
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = rectangle; 
var viewer = new Cesium.Viewer('cesiumContainer', { 
    timeline: false, 
    animation : false, 
    vrButton : true, 
    selectionIndicator : false 
}); 


    function search() { 
     alert("success"); 
    } 
} 

Wenn ich dies führen Sie es hebt einen Fehler „Suche ist keine Funktion“. Wo bin ich falsch?

Answer 1

Das Problem ist, dass Caesium Sandcastle hüllt Ihren Code in einer startup Funktion, wie Sie oben in der ersten Zeile JavaScript in Ihrer Frage sehen können, und dies schützt lokale Erklärungen aus dem globalen Bereich. Es gibt also keine -Funktion, an die gebunden werden kann. Aber solche globalen verbindlichen Funktionen sind heutzutage keine gute Praxis.

Geben Sie dies ein Versuch statt: Entfernen Sie die onkeydown="search()" Attribut aus HTML-Code oben, und stattdessen auf das Ereignis in JavaScript abonnieren etwa so:

function search() { 
    console.log('testing search...'); 
} 

document.getElementById('search').addEventListener('keypress', search, false);