0

我正在使用 Backbone 并具有以下视图：

class GT.RunManager.Views.ViolationMarker extends Backbone.View
 className: 'violation-marker'

 template: JST['app/templates/violation_marker']

 initialize: (@options) ->
   @x = @options.x
   @y = @options.y
   @location = @options.location
   @render()

 render: =>
   @$el.html @template()
   @$el.data 'location', @location
   @$el.css
     'top': @y
     'left': @x
   this

从以下位置调用：

class GT.RunManager.Views.FloorplanView extends Backbone.View
  className: 'floorplan-view'

  events:
   'click .violation-marker' : 'edit_location'
   'click'  : 'create_location'

 initialize: (@options) ->
   @run = @options.run
   @student = @options.student
   @floorplan = @options.run.get('floorplan')
   @locations = new GT.RunManager.Collections.Locations()
   @locations.run = @options.run
   @locations.on 'add', @set_marker
   @locations.on 'reset', @load_markers

 @run.on 'remove_location', (location) =>
   location.destroy() if location
   @load_markers()

 @locations.fetch data: { student_id: @student.id }
 @render()

render: =>
  if @floorplan
    @$el.css 'background-image', "url(data:image/png;base64,#{@floorplan.url})"
  this    

create_location: (e) =>
  @locations.create x: e.offsetX - 10, y: e.offsetY - 10, student_id: @student.id, run_id: @run.id

load_markers: =>
  @$el.find('i').remove()
  @locations.each (location) => @set_marker(location, false)

set_marker: (location, prompt = true) =>
  marker = new GT.RunManager.Views.ViolationMarker(location: location, x: location.get('x'), y: location.get('y'))
  @$el.append marker.el
  if prompt
    @run.trigger 'violations:set', location

这个想法是在用户触摸它的屏幕上放置一个图标（在 iPad 上，用于 exp）。它在 Chrome 和 Safari 中效果很好，但在 Firefox 中却不行，它的图标被放置在父 div 的左上角。

有任何想法吗？

编辑：这个主干视图的样式使用以下 css：

div.violation-marker {
position: absolute;
background-color: red;
@include border-radius(6px);
padding: 4px;}

模板只是（引导程序）：

<i class="icon icon-fire icon-white"></i>

父 div 的样式为：

.floorplan-view {
position: relative;
float: left;
margin-left: 100px;
width: 755px;
height: 755px; }
4

1 回答 1

0

原来问题在于 Firefox 不处理 e.offsetX 和 e.offsetY。一旦我改变了捕捉位置的方式，一切都很好。这是获取 x 坐标的防 Firefox 版本：

x = (ev.offsetX || ev.clientX - $(ev.target).offset().left)

感谢所有的帮助。

于 2012-06-09T15:12:38.533 回答